6334bd832f
* Placed eraser into shape switcher (top toolbar). Redesigned top toolbar. * Redesigned zoom and undo-redo buttons. * Started redesigning left toolbar. * Redesigned help dialog. * Colour picker now somewhat in line with new design * [WIP] Changed a bunch of icons. TODO: organise new icons. * [WIP] Organised a bunch of icons. Still some to do * [WIP] Started working on hamburger menu. * Fixed some bugs with hamburger menu. * Menu and left toolbar positioning. * Added some more items to hamburger menu. * Changed some icons. * Modal/dialog styling & bunch of fixes. * Some more dialog improvements & fixes. * Mobile menu changes. * Menu can now be closed with outside click. * Collab avatars and button changes. * Icon sizing. Left toolbar positioning. * Implemented welcome screen rendering logic. * [WIP] Welcome screen content + design. * Some more welcome screen content and design. * Merge fixes. * Tweaked icon set. * Welcome screen darkmode fix. * Content updates. * Various small fixes & adjustments. Moved language selection into menu. Fixed some problematic icons. Slightly moved encryption icon. * Sidebar header redesign. * Libraries content rendering logic + some styling. * Somem more library sidebar styling. * Publish library dialog styling. * scroll-back-to-content btn styling * ColorPicker positioning. * Library button styling. * ColorPicker positioning "fix". * Misc adjustments. * PenMode button changes. * Trying to make mobile somewhat usable. * Added a couple of icons. * Added some shortcuts. * Prevent welcome screen flickering. Fix issue with welcome screen interactivity. Don't show sidebar button when docked. * Icon sizing on smaller screens. * Sidebar styling changes. * Alignment button... well... alignments. * Fix inconsistent padding in left toolbar. * HintViewer changes. * Hamburger menu changes. * Move encryption badge back to its original pos. * Arrowhead changes. Active state, colours + stronger shadow. * Added new custom font. * Fixed bug with library button not rendering. * Fixed issue with lang selection colours. * Add tooltips for undo, redo. * Address some dark mode contrast issues. * (Re)introduce counter for selectedItems in sidebar * [WIP] Tweaked bounding box colour & padding. * Dashed bounding box for remote clients. * Some more bounding box tweaks. * Removed docking animation for now... * Address some RTL issues. * Welcome screen responsiveness. * use lighter selection color in dark mode & align naming * use rounded corners for transform handles * use lighter gray for welcomeScreen text in dark mode * disable selection on dialog buttons * change selection button icon * fix library item width being flexible * library: visually align spinner with first section heading * lint * fix scrollbar color in dark mode & make thinner * adapt properties panel max-height * add shrotcut label to save-to-current-file * fix unrelated `useOutsideClick` firing for active modal * add promo color to e+ menu item * fix type * lowered button size * fix transform handles raidus not accounting for zoom * attempt fix for excal logo on safari * final fix for excal logo on safari * fixing fhd resolution button sized * remove TODO shortcut * Collab related styling changes. Expanding avatar list no longer offsets top toolbar. Added active state & collaborator count badge for collab button. * Tweaked collab button active colours. * Added active style to collab btn in hamburger menu * Remove unnecessary comment. * Added back promo link for non (signed in) E+ users * Go to E+ button added for signed in E+ users. * Close menu & dropdown on modal close. * tweak icons & fix rendering on smaller sizes [part one] * align welcomeScreen icons with other UI * switch icon resize mq to `device-width` * disable welcomeScreen items `:hover` when selecting on canvas * change selection box color and style * reduce selection padding and fix group selection styling * improve collab cursor styling - make name borders round - hide status when "active" - remove black/gray colors * add Twitter to hamburger menu * align collab button * add shortcut for image export dialog * revert yarn.lock * fix more tabler icons * slightly better-looking penMode button * change penMode button & tooltip * revert hamburger menu icon * align padding on lang picker & canvas bg * updated robot txt to allow twitter bot and fb bot * added new OG and tweaked the OG state * add tooltip to collab button * align style for scroll-to-content button * fix pointer-events around toolbar * fix decor arrow positioning and RTL * fix welcomeScreen-item active state in dark mode * change `load` button copy * prevent shadow anim when opening a docked sidebar * update E+ links ga params * show redirect-to-eplus welcomeScreen subheading for signed-in users * make more generic * add ga for eplus redirect button * change copy and icons for hamburger export buttons * update snaps * trim the username to account for trailing spaces * tweaks around decor breakpoints * fix linear element editor test * remove .env change * remove `it.only` Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Maielo <maielo.mv@gmail.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
1553 lines
61 KiB
TypeScript
1553 lines
61 KiB
TypeScript
//
|
|
// All icons are imported from https://fontawesome.com/icons?d=gallery
|
|
// Icons are under the license https://fontawesome.com/license
|
|
//
|
|
|
|
// Note: when adding new icons, review https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines
|
|
// to determine whether or not the icons should be mirrored in right-to-left languages.
|
|
|
|
import React from "react";
|
|
|
|
import oc from "open-color";
|
|
import clsx from "clsx";
|
|
import { Theme } from "../element/types";
|
|
import { THEME } from "../constants";
|
|
|
|
const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
|
|
|
|
const handlerColor = (theme: Theme) =>
|
|
theme === THEME.LIGHT ? oc.white : "#1e1e1e";
|
|
|
|
type Opts = {
|
|
width?: number;
|
|
height?: number;
|
|
mirror?: true;
|
|
} & React.SVGProps<SVGSVGElement>;
|
|
|
|
export const createIcon = (
|
|
d: string | React.ReactNode,
|
|
opts: number | Opts = 512,
|
|
) => {
|
|
const {
|
|
width = 512,
|
|
height = width,
|
|
mirror,
|
|
style,
|
|
...rest
|
|
} = typeof opts === "number" ? ({ width: opts } as Opts) : opts;
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox={`0 0 ${width} ${height}`}
|
|
className={clsx({ "rtl-mirror": mirror })}
|
|
style={style}
|
|
{...rest}
|
|
>
|
|
{typeof d === "string" ? <path fill="currentColor" d={d} /> : d}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const tablerIconProps: Opts = {
|
|
width: 24,
|
|
height: 24,
|
|
fill: "none",
|
|
strokeWidth: 2,
|
|
stroke: "currentColor",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
} as const;
|
|
|
|
const modifiedTablerIconProps: Opts = {
|
|
width: 20,
|
|
height: 20,
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
} as const;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// tabler-icons: present
|
|
export const PlusPromoIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x={3} y={8} width={18} height={4} rx={1} />
|
|
<line x1={12} y1={8} x2={12} y2={21} />
|
|
<path d="M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7" />
|
|
<path d="M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: book
|
|
export const LibraryIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
|
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
|
<line x1="3" y1="6" x2="3" y2="19" />
|
|
<line x1="12" y1="6" x2="12" y2="19" />
|
|
<line x1="21" y1="6" x2="21" y2="19" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: plus
|
|
export const PlusIcon = createIcon(
|
|
<svg strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: dots-vertical
|
|
export const DotsIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: pinned
|
|
export const PinIcon = createIcon(
|
|
<svg strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M9 4v6l-2 4v2h10v-2l-2 -4v-6"></path>
|
|
<line x1="12" y1="16" x2="12" y2="21"></line>
|
|
<line x1="8" y1="4" x2="16" y2="4"></line>
|
|
</svg>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: lock-open (via Figma)
|
|
export const UnlockedIcon = createIcon(
|
|
<g>
|
|
<path
|
|
d="M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<path
|
|
d="M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<mask
|
|
id="UnlockedIcon"
|
|
style={{ maskType: "alpha" }}
|
|
maskUnits="userSpaceOnUse"
|
|
x={6}
|
|
y={1}
|
|
width={9}
|
|
height={9}
|
|
>
|
|
<path
|
|
stroke="none"
|
|
d="M6.399 9.561V5.175c0-.93.401-1.823 1.116-2.48a3.981 3.981 0 0 1 2.693-1.028c1.01 0 1.98.37 2.694 1.027.715.658 1.116 1.55 1.116 2.481"
|
|
fill="#fff"
|
|
/>
|
|
</mask>
|
|
<g mask="url(#UnlockedIcon)">
|
|
<path
|
|
stroke="none"
|
|
d="M5.149 9.561v1.25h2.5v-1.25h-2.5Zm5.06-7.894V.417v1.25Zm2.559 3.508v1.25h2.5v-1.25h-2.5ZM7.648 8.51V5.175h-2.5V8.51h2.5Zm0-3.334c0-.564.243-1.128.713-1.561L6.668 1.775c-.959.883-1.52 2.104-1.52 3.4h2.5Zm.713-1.561a2.732 2.732 0 0 1 1.847-.697v-2.5c-1.31 0-2.585.478-3.54 1.358L8.36 3.614Zm1.847-.697c.71 0 1.374.26 1.847.697l1.694-1.839a5.231 5.231 0 0 0-3.54-1.358v2.5Zm1.847.697c.47.433.713.997.713 1.561h2.5c0-1.296-.56-2.517-1.52-3.4l-1.693 1.839Z"
|
|
fill="currentColor"
|
|
/>
|
|
</g>
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: lock (via Figma)
|
|
export const LockedIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path d="M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z" />
|
|
<path d="M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z" />
|
|
<path d="M6.667 8.333V5.417C6.667 3.806 8.159 2.5 10 2.5c1.841 0 3.333 1.306 3.333 2.917v2.916" />
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
// custom
|
|
export const WelcomeScreenMenuArrow = createIcon(
|
|
<>
|
|
<path
|
|
d="M38.5 83.5c-14-2-17.833-10.473-21-22.5C14.333 48.984 12 22 12 12.5"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="m12.005 10.478 7.905 14.423L6 25.75l6.005-15.273Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M12.005 10.478c1.92 3.495 3.838 7 7.905 14.423m-7.905-14.423c3.11 5.683 6.23 11.368 7.905 14.423m0 0c-3.68.226-7.35.455-13.91.85m13.91-.85c-5.279.33-10.566.647-13.91.85m0 0c1.936-4.931 3.882-9.86 6.005-15.273M6 25.75c2.069-5.257 4.135-10.505 6.005-15.272"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
</>,
|
|
{ width: 41, height: 94, fill: "none" },
|
|
);
|
|
|
|
// custom
|
|
export const WelcomeScreenHelpArrow = createIcon(
|
|
<>
|
|
<path
|
|
d="M18.026 1.232c-5.268 13.125-5.548 33.555 3.285 42.311 8.823 8.75 33.31 12.304 42.422 13.523"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="m72.181 59.247-13.058-10-2.948 13.62 16.006-3.62Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M72.181 59.247c-3.163-2.429-6.337-4.856-13.058-10m13.058 10c-5.145-3.936-10.292-7.882-13.058-10m0 0c-.78 3.603-1.563 7.196-2.948 13.62m2.948-13.62c-1.126 5.168-2.24 10.346-2.948 13.62m0 0c5.168-1.166 10.334-2.343 16.006-3.62m-16.006 3.62c5.51-1.248 11.01-2.495 16.006-3.62"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
</>,
|
|
{ width: 85, height: 71, fill: "none" },
|
|
);
|
|
|
|
// custom
|
|
export const WelcomeScreenTopToolbarArrow = createIcon(
|
|
<>
|
|
<path
|
|
d="M1 77c14-2 31.833-11.973 35-24 3.167-12.016-6-35-9.5-43.5"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="m24.165 1.093-2.132 16.309 13.27-4.258-11.138-12.05Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M24.165 1.093c-.522 3.953-1.037 7.916-2.132 16.309m2.131-16.309c-.835 6.424-1.68 12.854-2.13 16.308m0 0c3.51-1.125 7.013-2.243 13.27-4.257m-13.27 4.257c5.038-1.608 10.08-3.232 13.27-4.257m0 0c-3.595-3.892-7.197-7.777-11.14-12.05m11.14 12.05c-3.837-4.148-7.667-8.287-11.14-12.05"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
/>
|
|
</>,
|
|
{ width: 38, height: 78, fill: "none" },
|
|
);
|
|
|
|
// custom
|
|
export const ExcalLogo = createIcon(
|
|
<g fill="currentColor">
|
|
<path d="M24.296 12.214c0 .112-.134.224-.291.224-.135 0-.516.629-.808 1.392-.897 2.335-9.867 20.096-9.89 19.534 0-.292-.134-.494-.359-.494-.313 0-.358.18-.224 1.055.135 1.01.045 1.236-3.14 7.432-1.793 3.525-3.722 7.208-4.282 8.196-.584 1.032-1.032 2.155-1.077 2.626-.067.809.022.92 1.973 2.605 1.122.988 2.557 2.223 3.185 2.784 2.826 2.582 4.149 3.615 4.508 3.547.538-.09 8.858-8.823 8.88-9.317 0-.225-.403-3.638-.897-7.59-.852-6.735-1.66-14.616-1.57-15.38.068-.47-.269-2.85-.516-3.884-.201-.808-.112-1.145 1.503-4.827.942-2.178 2.176-4.85 2.714-5.928.515-1.077.964-2.02.964-2.088 0-.067-.157-.112-.336-.112-.18 0-.337.09-.337.225Zm-5.158 16.772c.247 1.572.74 5.344 1.099 8.375.695 5.568 1.503 11.742 1.727 13.314.135.786.045.943-1.413 2.56-2.534 2.851-5.225 5.658-6.145 6.376l-.852.674-4.373-4.086c-4.037-3.728-4.373-4.11-4.127-4.558a5154.2 5154.2 0 0 1 2.535-4.626 727.864 727.864 0 0 0 3.678-6.78c.784-1.46 1.502-2.717 1.637-2.785.156-.09.201 2.178.156 7.006-.09 7.207-.067 7.23.651 7.072.09 0 .157-3.637.157-8.06V35.43l2.355-4.715c1.3-2.605 2.377-4.693 2.422-4.67.045.022.27 1.347.493 2.94ZM9.562 1.818C7.903 3.143 5.346 5.388 3.328 7.32L1.735 8.823l.292 1.976c.157 1.078.449 3.188.628 4.67.202 1.482.404 2.874.47 3.077.09.269 0 .404-.246.404-.426 0-.449-.113.718 3.592.286.952.577 1.903.875 2.851.044.158.224.225.425.158.202-.09.314-.27.247-.427-.067-.18.045-.36.224-.427.247-.09.225-.269-.157-.92-.605-1.01-2.152-9.633-2.242-12.416-.067-1.976-.067-1.999.762-3.121.808-1.1 2.67-2.762 5.54-4.873.807-.605 1.614-1.28 1.839-1.504.336-.404.493-.292 3.319 2.717 1.637 1.729 3.453 3.502 4.037 3.952l1.076.808-.83 1.75c-.448.944-2.265 4.581-4.059 8.04-3.745 7.274-2.983 6.578-7.333 6.645l-2.826.023-.942 1.077c-.987 1.146-1.121 1.572-.65 2.29.18.248.313.652.313.898 0 .405.157.472 1.055.517.56.023 1.076.09 1.144.157.067.068.156 1.46.224 3.098l.09 2.965-1.503 3.232C1.735 45.422.749 47.891.749 48.7c0 .427.09.786.18.786.224 0 .224-.022 9.35-19.085a4398.495 4398.495 0 0 1 8.927-18.546c.672-1.369 1.278-2.626 1.323-2.806.045-.202-1.503-1.751-3.97-3.93-2.22-1.975-4.171-3.772-4.35-3.974-.516-.628-1.279-.426-2.647.674ZM8.441 31.231c-.18.472-.65 1.46-1.031 2.2-.629 1.258-.696 1.303-.853.786-.09-.314-.157-1.235-.18-2.066-.022-1.639-.067-1.616 1.817-1.728L8.8 30.4l-.358.831Zm1.884-3.592c-1.032 1.998-1.077 2.02-3.903 2.155-2.489.135-2.533.112-2.533-.36 0-.269-.09-.628-.203-.808-.134-.202-.044-.56.27-1.055l.493-.763H6.69c1.234-.023 2.647-.113 3.14-.202.494-.09.92-.135.965-.113.045.023-.18.54-.471 1.146Zm-.09-20.477c-.404.292-.516.584-.516 1.325 0 .875.067 1.01.673 1.257.605.247.763.224 1.458-.247.92-.629.941-.786.269-1.796-.583-.876-1.166-1.033-1.884-.54Z" />
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M23.703 11.793c.166-.291.501-.514.93-.514.38 0 .698.161.82.283.161.162.225.35.225.54a.822.822 0 0 1-.056.289c-.08.218-.5 1.106-.983 2.116-.535 1.071-1.76 3.727-2.699 5.895-.79 1.802-1.209 2.784-1.404 3.416-.142.461-.132.665-.058.961.264 1.103.6 3.647.53 4.132-.088.756.727 8.547 1.57 15.21.5 3.997.903 7.45.903 7.676l-.001.033c-.004.087-.041.288-.211.54-.24.354-.914 1.143-1.8 2.119-2.004 2.21-5.107 5.423-6.463 6.653-.322.292-.566.485-.696.56a.884.884 0 0 1-.289.111c-.194.037-.579-.007-1.11-.349-.707-.453-1.981-1.522-4-3.366-.627-.561-2.061-1.794-3.176-2.776-.81-.699-1.308-1.138-1.612-1.466-.32-.343-.47-.61-.549-.87-.078-.257-.085-.515-.055-.874.05-.52.521-1.769 1.166-2.91.559-.985 2.48-4.654 4.269-8.17 1.579-3.071 2.392-4.663 2.792-5.612.32-.759.329-1 .277-1.387-.085-.553-.092-.891-.052-1.092a.942.942 0 0 1 .274-.52c.164-.157.384-.261.704-.261.094 0 .184.011.27.033 1.924-3.44 8.554-16.632 9.316-18.616.276-.724.64-1.336.848-1.556a.965.965 0 0 1 .32-.228Zm-5.399 16.402c-.49.942-.971 1.888-1.446 2.837l-2.28 4.565v7.871c0 4.023-.06 7.404-.136 8.04-.067.552-.474.691-.654.722l.075-.008c-.317.07-.574.063-.778-.023-.234-.098-.5-.297-.63-.857-.156-.681-.158-2.462-.103-6.893.019-2.022.022-3.592.008-4.725-.156.276-.315.562-.467.843a737.624 737.624 0 0 1-3.682 6.79 3618.972 3618.972 0 0 0-2.462 4.493c.062.088.169.231.289.364.55.61 1.631 1.623 3.624 3.462l3.931 3.674.377-.298c.907-.709 3.554-3.479 6.055-6.293.425-.47.73-.814.946-1.084.175-.22.28-.36.319-.501.031-.117.002-.227-.024-.379l-.004-.02c-.224-1.572-1.032-7.753-1.728-13.33-.358-3.022-.85-6.782-1.096-8.349l-.002-.01c-.042-.301-.087-.603-.132-.891ZM9.118 1.264C9.91.628 10.537.27 11.028.144c.727-.186 1.27.003 1.713.53.186.209 2.107 1.972 4.287 3.912 2.02 1.783 3.434 3.16 3.897 3.743.326.41.322.756.296.873a1.046 1.046 0 0 1-.005.018c-.047.188-.669 1.512-1.374 2.947a4348.55 4348.55 0 0 0-8.923 18.54c-7.335 15.32-8.808 18.396-9.217 19.015-.235.355-.419.404-.525.437a.815.815 0 0 1-.249.036.745.745 0 0 1-.647-.363C.176 49.67.04 49.222.04 48.7c0-.286.09-.754.316-1.434.452-1.356 1.466-3.722 3.225-7.53l1.432-3.083-.084-2.787a72.902 72.902 0 0 0-.156-2.53 7.307 7.307 0 0 0-.539-.046c-.463-.024-.764-.062-.96-.124-.304-.096-.48-.252-.598-.438-.105-.165-.17-.374-.17-.663 0-.134-.081-.348-.178-.481l-.019-.028c-.293-.448-.406-.831-.373-1.234.04-.484.34-1.052 1.08-1.91l.759-.869c-.103-.325-.471-1.513-.854-2.787-.737-2.339-1.004-3.238-1.018-3.578-.016-.393.134-.59.27-.715a.721.721 0 0 1 .192-.125 89.87 89.87 0 0 1-.414-2.782 231.651 231.651 0 0 0-.625-4.652l-.292-1.976a.71.71 0 0 1 .215-.62l1.589-1.501C4.87 4.86 7.446 2.599 9.118 1.264Zm-1.833 33.75a.819.819 0 0 1-.406.208.73.73 0 0 1-.491-.063l.048 1.618v.009l.849-1.773Zm5.874.697c-.035.087-.07.175-.107.261a20.92 20.92 0 0 1-.36.798.688.688 0 0 1 .457.007l.01.004v-1.07Zm.72-1.892-.015.018a.745.745 0 0 1-.407.236c.02.195.027.378 0 .592l.422-.846ZM7.7 31.175c-.268.027-.489.055-.6.07-.006.056-.013.13-.016.194-.005.19 0 .42.004.694.003.111.006.225.011.338.232-.471.459-.956.6-1.296Zm2.12-1.456a2.04 2.04 0 0 1-.415.31c.064.104.099.222.104.341l.132-.277.18-.374Zm-.14-2.374c-.654.079-1.882.153-2.974.173h-1.87l-.281.435c-.09.141-.17.331-.203.414.102.21.189.508.226.788h.007c.364.006.928-.023 1.805-.07 1.243-.06 1.88-.052 2.315-.291.154-.086.266-.215.387-.393.176-.261.354-.605.587-1.056Zm2.136-1.784c-.157.16-.331.3-.52.422a.631.631 0 0 1 .182.281l.337-.703Zm7.205-1.478c-.222.442-.445.883-.667 1.32a.787.787 0 0 1 .61.007c.036.018.145.07.243.2-.032-.165-.067-.33-.105-.493-.088-.351-.137-.633-.08-1.034h-.001ZM11.415 2.546c-.358.319-1.039.879-1.725 1.394C6.903 5.989 5.087 7.59 4.301 8.662c-.28.38-.458.605-.556.852-.15.38-.103.798-.068 1.824.063 1.923.833 6.669 1.493 9.686.262 1.199.483 2.11.654 2.394.25.426.364.71.398.894a.923.923 0 0 1-.184.764l1.27-.01c.863-.014 1.523.003 2.056-.019.424-.017.75-.052 1.034-.187.336-.159.596-.458.921-.955.62-.948 1.373-2.515 2.705-5.103 1.789-3.448 3.6-7.076 4.047-8.015l.582-1.227-.62-.466c-.595-.458-2.45-2.263-4.12-4.027a59.654 59.654 0 0 0-2.498-2.52ZM5.81 24.876v-.001l-.013-.03.013.031Zm-.71-.835.027-.011a.55.55 0 0 0-.028.011Zm19.904-11.777v.01-.01Zm.002-.016v-.034.034ZM9.82 6.587c-.587.424-.81.823-.81 1.9 0 .787.12 1.157.344 1.42.158.186.388.339.77.494.352.144.603.207.838.209.347.002.688-.12 1.285-.525.707-.483.98-.864 1.036-1.238.052-.352-.09-.812-.574-1.54-.412-.619-.853-.95-1.29-1.072-.489-.139-1.016-.05-1.586.342l-.013.01Zm2.015 2.028a6.288 6.288 0 0 0-.306-.52c-.19-.284-.326-.488-.531-.5-.113-.007-.224.058-.352.146-.218.159-.218.34-.218.745 0 .198.02.419.028.504.047.025.133.068.204.097.133.054.222.102.312.103.04 0 .071-.027.12-.054a4.29 4.29 0 0 0 .358-.225c.147-.1.299-.223.385-.296ZM9.12 1.263l-.002.002.002-.002Z"
|
|
/>
|
|
</g>,
|
|
{ width: 26, height: 62, fill: "none" },
|
|
);
|
|
|
|
// custom
|
|
export const SelectionIcon = createIcon(
|
|
<g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M6 6l4.153 11.793a0.365 .365 0 0 0 .331 .207a0.366 .366 0 0 0 .332 -.207l2.184 -4.793l4.787 -1.994a0.355 .355 0 0 0 .213 -.323a0.355 .355 0 0 0 -.213 -.323l-11.787 -4.36z" />
|
|
<path d="M13.5 13.5l4.5 4.5" />
|
|
</g>,
|
|
{ fill: "none", width: 22, height: 22, strokeWidth: 1.25 },
|
|
);
|
|
|
|
// tabler-icons: square
|
|
export const RectangleIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: square-rotated
|
|
export const DiamondIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10.5 20.4l-6.9 -6.9c-.781 -.781 -.781 -2.219 0 -3l6.9 -6.9c.781 -.781 2.219 -.781 3 0l6.9 6.9c.781 .781 .781 2.219 0 3l-6.9 6.9c-.781 .781 -2.219 .781 -3 0z" />
|
|
</g>,
|
|
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: circle
|
|
export const EllipseIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<circle cx="12" cy="12" r="9"></circle>
|
|
</g>,
|
|
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: arrow-narrow-right
|
|
export const ArrowIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<line x1="15" y1="16" x2="19" y2="12" />
|
|
<line x1="15" y1="8" x2="19" y2="12" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// custom?
|
|
export const LineIcon = createIcon(
|
|
<path d="M4.167 10h11.666" strokeWidth="1.5" />,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const PenModeIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z"></path>
|
|
<path d="M16 7h4"></path>
|
|
<path d="M18 19h-13a2 2 0 1 1 0 -4h4a2 2 0 1 0 0 -4h-3"></path>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// modified tabler-icons: pencil
|
|
export const FreedrawIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path
|
|
clipRule="evenodd"
|
|
d="m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z"
|
|
/>
|
|
<path d="m11.25 5.417 3.333 3.333" />
|
|
</g>,
|
|
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: typography
|
|
export const TextIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="20" x2="7" y2="20" />
|
|
<line x1="14" y1="20" x2="21" y2="20" />
|
|
<line x1="6.9" y1="15" x2="13.8" y2="15" />
|
|
<line x1="10.2" y1="6.3" x2="16" y2="20" />
|
|
<polyline points="5 20 11 4 13 4 20 20"></polyline>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// modified tabler-icons: photo
|
|
export const ImageIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path d="M12.5 6.667h.01" />
|
|
<path d="M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z" />
|
|
<path d="m3.333 12.5 3.334-3.333c.773-.745 1.726-.745 2.5 0l4.166 4.166" />
|
|
<path d="m11.667 11.667.833-.834c.774-.744 1.726-.744 2.5 0l1.667 1.667" />
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: eraser
|
|
export const EraserIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3" />
|
|
<path d="M18 13.3l-6.3 -6.3" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const ZoomInIcon = createIcon(
|
|
<path strokeWidth="1.25" d="M10 4.167v11.666M4.167 10h11.666" />,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const ZoomOutIcon = createIcon(
|
|
<path d="M5 10h10" strokeWidth="1.25" />,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const TrashIcon = createIcon(
|
|
<path
|
|
strokeWidth="1.25"
|
|
d="M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const DuplicateIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path d="M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z" />
|
|
<path
|
|
clipRule="evenodd"
|
|
d="M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z"
|
|
/>
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const MoonIcon = createIcon(
|
|
<path
|
|
clipRule="evenodd"
|
|
d="M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z"
|
|
stroke="currentColor"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const SunIcon = createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" />
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const HamburgerMenuIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<line x1="4" y1="6" x2="20" y2="6"></line>
|
|
<line x1="4" y1="12" x2="20" y2="12"></line>
|
|
<line x1="4" y1="18" x2="20" y2="18"></line>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const ExportIcon = createIcon(
|
|
<path
|
|
strokeWidth="1.25"
|
|
d="M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const HelpIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<circle cx="12" cy="12" r="9"></circle>
|
|
<line x1="12" y1="17" x2="12" y2="17.01"></line>
|
|
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const ExternalLinkIcon = createIcon(
|
|
<path
|
|
strokeWidth="1.25"
|
|
d="M9.167 5.833H5.833c-1.254 0-2.5 1.282-2.5 2.5v5.834c0 1.283 1.252 2.5 2.5 2.5h5.834c1.251 0 2.5-1.25 2.5-2.5v-3.334M8.333 11.667l8.334-8.334M12.5 3.333h4.167V7.5"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const GithubIcon = createIcon(
|
|
<path
|
|
d="M7.5 15.833c-3.583 1.167-3.583-2.083-5-2.5m10 4.167v-2.917c0-.833.083-1.166-.417-1.666 2.334-.25 4.584-1.167 4.584-5a3.833 3.833 0 0 0-1.084-2.667 3.5 3.5 0 0 0-.083-2.667s-.917-.25-2.917 1.084a10.25 10.25 0 0 0-5.166 0C5.417 2.333 4.5 2.583 4.5 2.583a3.5 3.5 0 0 0-.083 2.667 3.833 3.833 0 0 0-1.084 2.667c0 3.833 2.25 4.75 4.584 5-.5.5-.5 1-.417 1.666V17.5"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const DiscordIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path d="M7.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM12.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM6.25 6.25c2.917-.833 4.583-.833 7.5 0M5.833 13.75c2.917.833 5.417.833 8.334 0" />
|
|
<path d="M12.917 14.167c0 .833 1.25 2.5 1.666 2.5 1.25 0 2.361-1.39 2.917-2.5.556-1.39.417-4.861-1.25-9.584-1.214-.846-2.5-1.116-3.75-1.25l-.833 2.084M7.083 14.167c0 .833-1.13 2.5-1.526 2.5-1.191 0-2.249-1.39-2.778-2.5-.529-1.39-.397-4.861 1.19-9.584 1.157-.846 2.318-1.116 3.531-1.25l.833 2.084" />
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const TwitterIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const checkIcon = createIcon(
|
|
<polyline fill="none" stroke="currentColor" points="20 6 9 17 4 12" />,
|
|
{
|
|
width: 24,
|
|
height: 24,
|
|
},
|
|
);
|
|
|
|
export const LinkIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path d="M8.333 11.667a2.917 2.917 0 0 0 4.167 0l3.333-3.334a2.946 2.946 0 1 0-4.166-4.166l-.417.416" />
|
|
<path d="M11.667 8.333a2.917 2.917 0 0 0-4.167 0l-3.333 3.334a2.946 2.946 0 0 0 4.166 4.166l.417-.416" />
|
|
</g>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const save = createIcon(
|
|
"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z",
|
|
{ width: 448, height: 512 },
|
|
);
|
|
|
|
export const saveAs = createIcon(
|
|
"M252 54L203 8a28 27 0 00-20-8H28C12 0 0 12 0 27v195c0 15 12 26 28 26h204c15 0 28-11 28-26V73a28 27 0 00-8-19zM130 213c-21 0-37-16-37-36 0-19 16-35 37-35 20 0 37 16 37 35 0 20-17 36-37 36zm56-169v56c0 4-4 6-7 6H44c-4 0-7-2-7-6V42c0-4 3-7 7-7h133l4 2 3 2a7 7 0 012 5z M296 201l87 95-188 205-78 9c-10 1-19-8-18-20l9-84zm141-14l-41-44a31 31 0 00-46 0l-38 41 87 95 38-42c13-14 13-36 0-50z",
|
|
{ width: 448, height: 512 },
|
|
);
|
|
|
|
// tabler-icon: folder
|
|
export const LoadIcon = createIcon(
|
|
<path
|
|
d="m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const clipboard = createIcon(
|
|
"M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z",
|
|
{ width: 384, height: 512 },
|
|
);
|
|
|
|
export const palette = createIcon(
|
|
"M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
|
|
);
|
|
|
|
export const ExportImageIcon = createIcon(
|
|
<g strokeWidth="1.25">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M15 8h.01"></path>
|
|
<path d="M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5"></path>
|
|
<path d="M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4"></path>
|
|
<path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
|
|
<path d="M19 16v6"></path>
|
|
<path d="M22 19l-3 3l-3 -3"></path>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const exportToFileIcon = createIcon(
|
|
"M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z",
|
|
{ width: 512, height: 512 },
|
|
);
|
|
|
|
export const zoomIn = createIcon(
|
|
"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
|
|
{ width: 448, height: 512 },
|
|
);
|
|
|
|
export const zoomOut = createIcon(
|
|
"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
|
|
{ width: 448, height: 512 },
|
|
);
|
|
|
|
export const done = createIcon(
|
|
"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
|
|
);
|
|
|
|
export const menu = createIcon(
|
|
"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z",
|
|
);
|
|
|
|
export const UndoIcon = createIcon(
|
|
<path
|
|
d="M7.5 10.833 4.167 7.5 7.5 4.167M4.167 7.5h9.166a3.333 3.333 0 0 1 0 6.667H12.5"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const RedoIcon = createIcon(
|
|
<path
|
|
d="M12.5 10.833 15.833 7.5 12.5 4.167M15.833 7.5H6.667a3.333 3.333 0 1 0 0 6.667H7.5"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const questionCircle = createIcon(
|
|
"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z",
|
|
{ mirror: true },
|
|
);
|
|
|
|
export const share = createIcon(
|
|
<path
|
|
d="M5 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 17.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM7.25 8.917l5.5-2.834M7.25 11.083l5.5 2.834"
|
|
strokeWidth="1.5"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const shareIOS = createIcon(
|
|
"M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z",
|
|
{ width: 24, height: 24 },
|
|
);
|
|
|
|
export const shareWindows = createIcon(
|
|
<>
|
|
<path
|
|
fill="currentColor"
|
|
d="M40 5.6v6.1l-4.1.7c-8.9 1.4-16.5 6.9-20.6 15C13 32 10.9 43 12.4 43c.4 0 2.4-1.3 4.4-3 5-3.9 12.1-7 18.2-7.7l5-.6v12.8l11.2-11.3L62.5 22 51.2 10.8 40-.5v6.1zm10.2 22.6L44 34.5v-6.8l-6.9.6c-3.9.3-9.8 1.7-13.2 3.1-3.5 1.4-6.5 2.4-6.7 2.2-.9-1 3-7.5 6.4-10.8C28 18.6 34.4 16 40.1 16c3.7 0 3.9-.1 3.9-3.2V9.5l6.2 6.3 6.3 6.2-6.3 6.2z"
|
|
/>
|
|
<path
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
d="M0 36v20h48v-6.2c0-6 0-6.1-2-4.3-1.1 1-2 2.9-2 4.2V52H4V34c0-17.3-.1-18-2-18s-2 .7-2 20z"
|
|
/>
|
|
</>,
|
|
{ width: 64, height: 64 },
|
|
);
|
|
|
|
// Icon imported form Storybook
|
|
// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
|
|
export const resetZoom = createIcon(
|
|
<path
|
|
stroke="currentColor"
|
|
strokeWidth="40"
|
|
fill="currentColor"
|
|
d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
|
|
/>,
|
|
{ width: 1024 },
|
|
);
|
|
|
|
export const BringForwardIcon = createIcon(
|
|
<>
|
|
<g
|
|
clipPath="url(#a)"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path
|
|
d="M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path d="M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const SendBackwardIcon = createIcon(
|
|
<>
|
|
<g
|
|
clipPath="url(#a)"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388"
|
|
fill="currentColor"
|
|
/>
|
|
<path d="M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const BringToFrontIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path d="M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const SendToBackIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<path
|
|
d="M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<mask id="SendToBackIcon" fill="#fff">
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z"
|
|
/>
|
|
</mask>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z"
|
|
fill="currentColor"
|
|
mask="url(#SendToBackIcon)"
|
|
/>
|
|
<path
|
|
d="M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
//
|
|
// Align action icons created from scratch to match those of z-index actions
|
|
// Note: vertical align icons are flipped so the larger item is always the
|
|
// first one the user sees. Horizontal align icons should not be flipped since
|
|
// that would make them lie about their function.
|
|
//
|
|
export const AlignTopIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M3.333 3.333h13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v7.083c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V8.125c0-.92-.746-1.667-1.666-1.667ZM6.875 6.458h-.417c-.92 0-1.666.747-1.666 1.667v3.75c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667v-3.75c0-.92-.747-1.667-1.667-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const AlignBottomIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M3.333 16.667h13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M6.875 3.125h-.417c-.92 0-1.666.746-1.666 1.667v7.083c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667V4.792c0-.92-.747-1.667-1.667-1.667ZM13.542 5.817h-.417c-.92 0-1.667.747-1.667 1.667v4.391c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V7.484c0-.92-.746-1.667-1.666-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const AlignLeftIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M3.333 3.333v13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M15.208 4.792H8.125c-.92 0-1.667.746-1.667 1.666v.417c0 .92.747 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM12.516 11.458H8.125c-.92 0-1.667.746-1.667 1.667v.417c0 .92.747 1.666 1.667 1.666h4.391c.92 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.667-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const AlignRightIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M16.667 3.333v13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M11.875 4.792H4.792c-.92 0-1.667.746-1.667 1.666v.417c0 .92.746 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM11.683 11.458H7.292c-.92 0-1.667.746-1.667 1.667v.417c0 .92.746 1.666 1.667 1.666h4.39c.921 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.666-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const DistributeHorizontallyIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M16.667 3.333v13.334M3.333 3.333v13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M14.375 10.208v-.416c0-.92-.746-1.667-1.667-1.667H7.292c-.92 0-1.667.746-1.667 1.667v.416c0 .92.746 1.667 1.667 1.667h5.416c.92 0 1.667-.746 1.667-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const DistributeVerticallyIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M3.333 3.333h13.334M3.333 16.667h13.334"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M10.208 5.625h-.416c-.92 0-1.667.746-1.667 1.667v5.416c0 .92.746 1.667 1.667 1.667h.416c.92 0 1.667-.746 1.667-1.667V7.292c0-.92-.746-1.667-1.667-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const CenterVerticallyIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path
|
|
d="M10 18.333v-2.916"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M10 11.667V8.333" strokeLinejoin="round" />
|
|
<path d="M10 4.583V1.667" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M4.792 13.125v.417c0 .92.746 1.666 1.666 1.666h7.084c.92 0 1.666-.746 1.666-1.666v-.417c0-.92-.746-1.667-1.666-1.667H6.458c-.92 0-1.666.746-1.666 1.667ZM6.458 6.458v.417c0 .92.747 1.667 1.667 1.667h3.75c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666h-3.75c-.92 0-1.667.746-1.667 1.666Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const CenterHorizontallyIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.25">
|
|
<path d="M1.667 10h2.916" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M8.333 10h3.334" strokeLinejoin="round" />
|
|
<path d="M15.417 10h2.916" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M6.875 4.792h-.417c-.92 0-1.666.746-1.666 1.666v7.084c0 .92.746 1.666 1.666 1.666h.417c.92 0 1.667-.746 1.667-1.666V6.458c0-.92-.747-1.666-1.667-1.666ZM13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v3.75c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667v-3.75c0-.92-.746-1.667-1.666-1.667Z" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const UsersIcon = createIcon(
|
|
<g strokeWidth="1.5">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// not mirrored because it's inspired by a playback control, which is always RTL
|
|
export const start = createIcon(
|
|
"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z",
|
|
);
|
|
|
|
export const stop = createIcon(
|
|
"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z",
|
|
);
|
|
|
|
export const CloseIcon = createIcon(
|
|
<>
|
|
<g
|
|
clipPath="url(#a)"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M15 5 5 15M5 5l10 10" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const back = createIcon(
|
|
"M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z",
|
|
{ width: 320, height: 512, style: { marginLeft: "-0.2rem" }, mirror: true },
|
|
);
|
|
|
|
export const clone = createIcon(
|
|
"M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z",
|
|
{ mirror: true },
|
|
);
|
|
|
|
// modified https://feathericons.com/?query=shield
|
|
export const shield = createIcon(
|
|
"M11.553 22.894a.998.998 0 00.894 0s3.037-1.516 5.465-4.097C19.616 16.987 21 14.663 21 12V5a1 1 0 00-.649-.936l-8-3a.998.998 0 00-.702 0l-8 3A1 1 0 003 5v7c0 2.663 1.384 4.987 3.088 6.797 2.428 2.581 5.465 4.097 5.465 4.097zm-1.303-8.481l6.644-6.644a.856.856 0 111.212 1.212l-7.25 7.25a.856.856 0 01-1.212 0l-3.75-3.75a.856.856 0 111.212-1.212l3.144 3.144z",
|
|
{ width: 24 },
|
|
);
|
|
|
|
export const file = createIcon(
|
|
"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z",
|
|
{ width: 384, height: 512 },
|
|
);
|
|
|
|
// TODO barnabasmolnar/editor-redesign
|
|
// couldn't find a new icon for this
|
|
export const GroupIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<>
|
|
<path d="M25 26H111V111H25" fill={iconFillColor(theme)} />
|
|
<path
|
|
d="M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z"
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="2"
|
|
/>
|
|
<path d="M100 100H160V160H100" fill={iconFillColor(theme)} />
|
|
<path
|
|
d="M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z"
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="2"
|
|
/>
|
|
<g
|
|
fill={handlerColor(theme)}
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="6"
|
|
>
|
|
<rect x="2.5" y="2.5" width="30" height="30" />
|
|
<rect x="2.5" y="149.5" width="30" height="30" />
|
|
<rect x="147.5" y="149.5" width="30" height="30" />
|
|
<rect x="147.5" y="2.5" width="30" height="30" />
|
|
</g>
|
|
</>,
|
|
{ width: 182, height: 182, mirror: true },
|
|
),
|
|
);
|
|
|
|
export const UngroupIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<>
|
|
<path d="M25 26H111V111H25" fill={iconFillColor(theme)} />
|
|
<path
|
|
d="M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z"
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="2"
|
|
/>
|
|
<path d="M100 100H160V160H100" fill={iconFillColor(theme)} />
|
|
<path
|
|
d="M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z"
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="2"
|
|
/>
|
|
<g
|
|
fill={handlerColor(theme)}
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth="6"
|
|
>
|
|
<rect x="2.5" y="2.5" width="30" height="30" />
|
|
<rect x="78.5" y="149.5" width="30" height="30" />
|
|
<rect x="147.5" y="149.5" width="30" height="30" />
|
|
<rect x="147.5" y="78.5" width="30" height="30" />
|
|
<rect x="105.5" y="2.5" width="30" height="30" />
|
|
<rect x="2.5" y="102.5" width="30" height="30" />
|
|
</g>
|
|
</>,
|
|
{ width: 182, height: 182, mirror: true },
|
|
),
|
|
);
|
|
|
|
export const FillHachureIcon = createIcon(
|
|
<>
|
|
<path
|
|
d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<mask
|
|
id="FillHachureIcon"
|
|
style={{ maskType: "alpha" }}
|
|
maskUnits="userSpaceOnUse"
|
|
x={2}
|
|
y={2}
|
|
width={16}
|
|
height={16}
|
|
>
|
|
<path
|
|
d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
</mask>
|
|
<g mask="url(#FillHachureIcon)">
|
|
<path
|
|
d="M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325m-20.444 5.35L12.675-.222m-8.157 18.34L17.416 5.22"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FillCrossHatchIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
<mask
|
|
id="FillCrossHatchIcon"
|
|
style={{ maskType: "alpha" }}
|
|
maskUnits="userSpaceOnUse"
|
|
x={-1}
|
|
y={-1}
|
|
width={22}
|
|
height={22}
|
|
>
|
|
<path
|
|
d="M2.426 15.044 15.044 2.426M7.383 20 20 7.383M0 12.617 12.617 0m-7.98 17.941L17.256 5.324m-2.211 12.25L2.426 4.956M20 12.617 7.383 0m5.234 20L0 7.383m17.941 7.98L5.324 2.745"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</mask>
|
|
<g mask="url(#FillCrossHatchIcon)">
|
|
<path
|
|
d="M14.121 2H5.88A3.879 3.879 0 0 0 2 5.879v8.242A3.879 3.879 0 0 0 5.879 18h8.242A3.879 3.879 0 0 0 18 14.121V5.88A3.879 3.879 0 0 0 14.121 2Z"
|
|
fill="currentColor"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FillSolidIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
{ ...modifiedTablerIconProps, fill: "currentColor" },
|
|
);
|
|
|
|
export const StrokeWidthBaseIcon = createIcon(
|
|
<>
|
|
<path
|
|
d="M4.167 10h11.666"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const StrokeWidthBoldIcon = createIcon(
|
|
<path
|
|
d="M5 10h10"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const StrokeWidthExtraBoldIcon = createIcon(
|
|
<path
|
|
d="M5 10h10"
|
|
stroke="currentColor"
|
|
strokeWidth="3.75"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const StrokeStyleSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<path
|
|
d="M6 10H34"
|
|
stroke={iconFillColor(theme)}
|
|
strokeWidth={2}
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
/>,
|
|
{
|
|
width: 40,
|
|
height: 20,
|
|
},
|
|
),
|
|
);
|
|
|
|
export const StrokeStyleDashedIcon = createIcon(
|
|
<g strokeWidth="2">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M5 12h2" />
|
|
<path d="M17 12h2" />
|
|
<path d="M11 12h2" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: line-dotted
|
|
export const StrokeStyleDottedIcon = createIcon(
|
|
<g strokeWidth="2">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M4 12v.01" />
|
|
<path d="M8 12v.01" />
|
|
<path d="M12 12v.01" />
|
|
<path d="M16 12v.01" />
|
|
<path d="M20 12v.01" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const SloppinessArchitectIcon = createIcon(
|
|
<path
|
|
d="M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const SloppinessArtistIcon = createIcon(
|
|
<path
|
|
d="M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.355 2.668-1.062.101 2.822 1.32 3.105 1.218.283 5.112-1.814 5.112-1.814m-13.469 2.23c2.963-1.586 6.13-5.62 7.468-4.998 1.338.623-1.153 4.11-.132 5.595 1.02 1.487 6.133-1.43 6.133-1.43"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const SloppinessCartoonistIcon = createIcon(
|
|
<path
|
|
d="M2.5 11.936c1.737-.879 8.627-5.346 10.42-5.268 1.795.078-.418 5.138.345 5.736.763.598 3.53-1.789 4.235-2.147M2.929 9.788c1.164-.519 5.47-3.28 6.987-3.114 1.519.165 1 3.827 2.121 4.109 1.122.281 3.839-2.016 4.606-2.42"
|
|
strokeWidth="1.25"
|
|
/>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const EdgeSharpIcon = createIcon(
|
|
<svg strokeWidth="1.5">
|
|
<path d="M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10" />
|
|
<path d="M13.3333 3.33331V3.34331" />
|
|
<path d="M16.6667 3.33331V3.34331" />
|
|
<path d="M16.6667 6.66669V6.67669" />
|
|
<path d="M16.6667 10V10.01" />
|
|
<path d="M3.33334 13.3333V13.3433" />
|
|
<path d="M16.6667 13.3333V13.3433" />
|
|
<path d="M3.33334 16.6667V16.6767" />
|
|
<path d="M6.66666 16.6667V16.6767" />
|
|
<path d="M10 16.6667V16.6767" />
|
|
<path d="M13.3333 16.6667V16.6767" />
|
|
<path d="M16.6667 16.6667V16.6767" />
|
|
</svg>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: border-radius
|
|
export const EdgeRoundIcon = createIcon(
|
|
<g
|
|
strokeWidth="1.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M4 12v-4a4 4 0 0 1 4 -4h4" />
|
|
<line x1="16" y1="4" x2="16" y2="4.01" />
|
|
<line x1="20" y1="4" x2="20" y2="4.01" />
|
|
<line x1="20" y1="8" x2="20" y2="8.01" />
|
|
<line x1="20" y1="12" x2="20" y2="12.01" />
|
|
<line x1="4" y1="16" x2="4" y2="16.01" />
|
|
<line x1="20" y1="16" x2="20" y2="16.01" />
|
|
<line x1="4" y1="20" x2="4" y2="20.01" />
|
|
<line x1="8" y1="20" x2="8" y2="20.01" />
|
|
<line x1="12" y1="20" x2="12" y2="20.01" />
|
|
<line x1="16" y1="20" x2="16" y2="20.01" />
|
|
<line x1="20" y1="20" x2="20" y2="20.01" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const ArrowheadNoneIcon = createIcon(
|
|
<path d="M6 10H34" stroke="currentColor" strokeWidth={2} fill="none" />,
|
|
{
|
|
width: 40,
|
|
height: 20,
|
|
},
|
|
);
|
|
|
|
export const ArrowheadArrowIcon = React.memo(
|
|
({ flip = false }: { flip?: boolean }) =>
|
|
createIcon(
|
|
<g
|
|
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
fill="none"
|
|
>
|
|
<path d="M34 10H6M34 10L27 5M34 10L27 15" />
|
|
<path d="M27.5 5L34.5 10L27.5 15" />
|
|
</g>,
|
|
{ width: 40, height: 20 },
|
|
),
|
|
);
|
|
|
|
export const ArrowheadDotIcon = React.memo(
|
|
({ flip = false }: { flip?: boolean }) =>
|
|
createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
|
>
|
|
<path d="M32 10L6 10" strokeWidth={2} />
|
|
<circle r="4" transform="matrix(-1 0 0 1 30 10)" />
|
|
</g>,
|
|
{ width: 40, height: 20 },
|
|
),
|
|
);
|
|
|
|
export const ArrowheadBarIcon = React.memo(
|
|
({ flip = false }: { flip?: boolean }) =>
|
|
createIcon(
|
|
<g transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}>
|
|
<path
|
|
d="M34 10H5.99996M34 10L34 5M34 10L34 15"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
fill="none"
|
|
/>
|
|
</g>,
|
|
{ width: 40, height: 20 },
|
|
),
|
|
);
|
|
|
|
export const ArrowheadTriangleIcon = React.memo(
|
|
({ flip = false }: { flip?: boolean }) =>
|
|
createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
|
>
|
|
<path d="M32 10L6 10" strokeWidth={2} />
|
|
<path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
|
|
</g>,
|
|
{ width: 40, height: 20 },
|
|
),
|
|
);
|
|
|
|
export const FontSizeSmallIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FontSizeMediumIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M5 16.667V3.333L10 15l5-11.667v13.334"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FontSizeLargeIcon = createIcon(
|
|
<>
|
|
<g clipPath="url(#a)">
|
|
<path
|
|
d="M5.833 3.333v13.334h8.334"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FontSizeExtraLargeIcon = createIcon(
|
|
<>
|
|
<path
|
|
d="m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FontFamilyNormalIcon = createIcon(
|
|
<>
|
|
<g
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334" />
|
|
</g>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const FontFamilyCodeIcon = createIcon(
|
|
<>
|
|
<g
|
|
clipPath="url(#a)"
|
|
stroke="currentColor"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path fill="#fff" d="M0 0h20v20H0z" />
|
|
</clipPath>
|
|
</defs>
|
|
</>,
|
|
modifiedTablerIconProps,
|
|
);
|
|
|
|
export const TextAlignLeftIcon = createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="8" x2="20" y2="8" />
|
|
<line x1="4" y1="12" x2="12" y2="12" />
|
|
<line x1="4" y1="16" x2="16" y2="16" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const TextAlignCenterIcon = createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="8" x2="20" y2="8" />
|
|
<line x1="8" y1="12" x2="16" y2="12" />
|
|
<line x1="6" y1="16" x2="18" y2="16" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
export const TextAlignRightIcon = createIcon(
|
|
<g
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="8" x2="20" y2="8" />
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|
<line x1="8" y1="16" x2="20" y2="16" />
|
|
</g>,
|
|
tablerIconProps,
|
|
);
|
|
|
|
// tabler-icons: layout-align-top
|
|
export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<g
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="4" x2="20" y2="4" />
|
|
<rect x="9" y="8" width="6" height="12" rx="2" />
|
|
</g>,
|
|
tablerIconProps,
|
|
),
|
|
);
|
|
|
|
// tabler-icons: layout-align-bottom
|
|
export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<g
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="20" x2="20" y2="20" />
|
|
<rect x="9" y="4" width="6" height="12" rx="2"></rect>
|
|
</g>,
|
|
tablerIconProps,
|
|
),
|
|
);
|
|
|
|
// tabler-icons: layout-align-middle
|
|
export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
|
|
createIcon(
|
|
<g
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="12" x2="9" y2="12" />
|
|
<line x1="15" y1="12" x2="20" y2="12" />
|
|
<rect x="9" y="6" width="6" height="12" rx="2" />
|
|
</g>,
|
|
tablerIconProps,
|
|
),
|
|
);
|
|
|
|
export const publishIcon = createIcon(
|
|
<path
|
|
d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"
|
|
fill="currentColor"
|
|
/>,
|
|
{ width: 640, height: 512 },
|
|
);
|
|
|
|
export const eraser = createIcon(
|
|
<path d="M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" />,
|
|
);
|