mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-23 13:29:02 +08:00
fundon
9465d0dc73
Closes: [BS-3555](https://linear.app/affine-design/issue/BS-3555/ui-attachment-loading-变量更新) Closes: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-图片-loading-变量更新) ### Dark <img width="625" alt="Screenshot 2025-05-26 at 20 32 36" src="https://github.com/user-attachments/assets/93501e3d-8fc6-45f9-84a0-ac147e5c5f9f" /> ### Light <img width="623" alt="Screenshot 2025-05-26 at 20 32 25" src="https://github.com/user-attachments/assets/7d5bc128-6667-45b5-982d-dab3a22706a7" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Loading icons are now invoked as functions, allowing for more flexible and customizable rendering with parameters like size and progress. - **Refactor** - Replaced theme-dependent and static loading icon references with a unified `LoadingIcon()` component across multiple components and blocks. - Removed legacy icon variants and simplified icon import statements, centralizing icon rendering logic. - **Style** - Updated styles for loading and reload buttons to use theme-aware CSS variables. - Enlarged and repositioned loading indicators in image blocks for better visibility. - **Bug Fixes** - Achieved consistent loading icon rendering across various blocks and components by standardizing icon invocation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
857 lines
21 KiB
TypeScript
857 lines
21 KiB
TypeScript
import * as icons from '@blocksuite/icons/lit';
|
|
import { html, svg } from 'lit';
|
|
|
|
import { icon } from './utils.js';
|
|
|
|
// Paragraph icons
|
|
|
|
export const TextIcon = icons.TextIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const HeadingIcon = icons.HeadingsIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading1Icon = icons.Heading1Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading2Icon = icons.Heading2Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading3Icon = icons.Heading3Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading4Icon = icons.Heading4Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading5Icon = icons.Heading5Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const Heading6Icon = icons.Heading6Icon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const BulletedListIcon = icons.BulletedListIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const NumberedListIcon = icons.NumberedListIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
/**
|
|
* Size 24
|
|
*
|
|
* See also {@link DatabaseTableViewIcon20}
|
|
*/
|
|
export const DatabaseTableViewIcon = icons.DatabaseTableViewIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
export const DatabaseTableViewIcon20 = icons.DatabaseTableViewIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
/**
|
|
* Size 24
|
|
*
|
|
* See also {@link DatabaseKanbanViewIcon20}
|
|
*/
|
|
export const DatabaseKanbanViewIcon = icons.DatabaseKanbanViewIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
export const DatabaseKanbanViewIcon20 = icons.DatabaseKanbanViewIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const CheckBoxIcon = icons.CheckBoxCheckLinearIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const CodeBlockIcon = icons.CodeBlockIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const QuoteIcon = icons.QuoteIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const DividerIcon = icons.DividerIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Format icons
|
|
|
|
export const BoldIcon = icons.BoldIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const ItalicIcon = icons.ItalicIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const UnderlineIcon = icons.UnderLineIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const StrikethroughIcon = icons.StrikeThroughIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const CodeIcon = icons.CodeIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const LinkIcon = icons.LinkIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Slash menu action icons
|
|
export const CopyIcon = icons.CopyIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const PasteIcon = icons.PasteIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const DuplicateIcon = icons.DuplicateIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const DeleteIcon = icons.DeleteIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Date & Time icons
|
|
export const TodayIcon = icons.TodayIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const TomorrowIcon = icons.TomorrowIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const YesterdayIcon = icons.YesterdayIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const NowIcon = icons.NowIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Misc icons
|
|
|
|
export const CrossIcon = icons.CloseIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const SearchIcon = icons.SearchIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const RefreshIcon = icons.ResetIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const WebIcon16 = icons.PublishIcon({
|
|
width: '16',
|
|
height: '16',
|
|
});
|
|
|
|
// Link Icon
|
|
|
|
/**
|
|
* ✅
|
|
*/
|
|
export const ConfirmIcon = icons.DoneIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
/**
|
|
* 🖊️
|
|
*/
|
|
|
|
export const OpenIcon = icons.OpenInNewIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const CenterPeekIcon = icons.CenterPeekIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const ExpandFullSmallIcon = icons.ExpandFullIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const SplitViewIcon = icons.SplitViewIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const EditIcon = icons.EditIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const UnlinkIcon = icons.UnlinkIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Image Icon
|
|
|
|
export const CaptionIcon = icons.CaptionIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const DownloadIcon = icons.DownloadIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const WrapIcon = icons.WrapIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const CancelWrapIcon = icons.CancelWrapIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Attachment
|
|
|
|
export const ViewIcon = icons.ViewIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const EmbedWebIcon = icons.EmbedWebIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const ArrowDownIcon = icons.ArrowDownSmallIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
// Linked Doc
|
|
|
|
export const FontDocIcon = icons.PageIcon({
|
|
width: '1.25em',
|
|
height: '1.25em',
|
|
style: 'vertical-align: middle; font-size: inherit; margin-bottom: 0.1em;',
|
|
});
|
|
export const DocIcon = icons.PageIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
export const SmallDocIcon = icons.PageIcon({
|
|
width: '16',
|
|
height: '16',
|
|
});
|
|
|
|
export const FontLinkedDocIcon = icons.LinkedPageIcon({
|
|
width: '1.25em',
|
|
height: '1.25em',
|
|
style: 'vertical-align: middle; font-size: inherit; margin-bottom: 0.1em;',
|
|
});
|
|
|
|
export const BlockLinkIcon = icons.BlockLinkIcon({
|
|
width: '1.25em',
|
|
height: '1.25em',
|
|
style: 'vertical-align: middle; font-size: inherit; margin-bottom: 0.1em;',
|
|
});
|
|
|
|
export const LinkedEdgelessIcon = icons.LinkedEdgelessIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const NewDocIcon = icons.PlusIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const DualLinkIcon16 = icons.DualLinkIcon({
|
|
width: '16',
|
|
height: '16',
|
|
});
|
|
|
|
export const ArrowDownSmallIcon = icons.ArrowDownSmallIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const AddCursorIcon = icons.PlusIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const FontFamilyIcon = icons.FontIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const TextBackgroundDuotoneIcon = html` <svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2.62503 4.58336C2.62503 3.50181 3.50181 2.62503 4.58336 2.62503H15.4167C16.4983 2.62503 17.375 3.50181 17.375 4.58336V15.4167C17.375 16.4983 16.4983 17.375 15.4167 17.375H4.58336C3.50181 17.375 2.62503 16.4983 2.62503 15.4167V4.58336Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2.625 4.58333C2.625 3.50178 3.50178 2.625 4.58333 2.625H15.4167C16.4982 2.625 17.375 3.50178 17.375 4.58333V15.4167C17.375 16.4982 16.4982 17.375 15.4167 17.375H4.58333C3.50178 17.375 2.625 16.4982 2.625 15.4167V4.58333ZM4.58333 3.20833C3.82394 3.20833 3.20833 3.82394 3.20833 4.58333V15.4167C3.20833 16.1761 3.82394 16.7917 4.58333 16.7917H15.4167C16.1761 16.7917 16.7917 16.1761 16.7917 15.4167V4.58333C16.7917 3.82394 16.1761 3.20833 15.4167 3.20833H4.58333Z"
|
|
fill="black"
|
|
fill-opacity="0.3"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8.85183 6.254C9.03131 5.77539 9.48885 5.45831 10 5.45831C10.5112 5.45831 10.9687 5.77539 11.1482 6.254L13.9185 13.6416C14.0397 13.9648 13.876 14.3251 13.5528 14.4463C13.2296 14.5675 12.8693 14.4037 12.7481 14.0805L11.9654 11.9932H8.03465L7.25188 14.0805C7.13068 14.4037 6.77042 14.5675 6.44722 14.4463C6.12402 14.3251 5.96027 13.9648 6.08147 13.6416L8.85183 6.254ZM8.5034 10.7432H11.4966L10 6.7522L8.5034 10.7432Z"
|
|
fill="var(--affine-text-primary-color)"
|
|
/>
|
|
</svg>`;
|
|
|
|
export const TextForegroundDuotoneIcon = html` <svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2.625 4.58333C2.625 3.50178 3.50178 2.625 4.58333 2.625H15.4167C16.4982 2.625 17.375 3.50178 17.375 4.58333V15.4167C17.375 16.4982 16.4982 17.375 15.4167 17.375H4.58333C3.50178 17.375 2.625 16.4982 2.625 15.4167V4.58333ZM4.58333 3.20833C3.82394 3.20833 3.20833 3.82394 3.20833 4.58333V15.4167C3.20833 16.1761 3.82394 16.7917 4.58333 16.7917H15.4167C16.1761 16.7917 16.7917 16.1761 16.7917 15.4167V4.58333C16.7917 3.82394 16.1761 3.20833 15.4167 3.20833H4.58333Z"
|
|
fill="black"
|
|
fill-opacity="0.3"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8.85183 6.254C9.03131 5.77539 9.48885 5.45831 10 5.45831C10.5112 5.45831 10.9687 5.77539 11.1482 6.254L13.9185 13.6416C14.0397 13.9648 13.876 14.3251 13.5528 14.4463C13.2296 14.5675 12.8693 14.4037 12.7481 14.0805L11.9654 11.9932H8.03465L7.25188 14.0805C7.13068 14.4037 6.77042 14.5675 6.44722 14.4463C6.12402 14.3251 5.96027 13.9648 6.08147 13.6416L8.85183 6.254ZM8.5034 10.7432H11.4966L10 6.7522L8.5034 10.7432Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>`;
|
|
|
|
const HighLightDuotoneSVG = svg`
|
|
<path d="M5.82912 16.3197L7.91758 18.4082L6.57812 19.7476C6.53121 19.7945 6.46407 19.8151 6.39891 19.8026L3.37038 19.2199C3.21286 19.1896 3.15332 18.9955 3.26674 18.8821L5.82912 16.3197Z" fill="currentColor"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0095 3.51624C17.9526 2.45932 16.26 2.39465 15.1255 3.36783L7.3214 10.0624C6.35443 10.8919 6.0528 12.261 6.58168 13.42L6.73506 13.7562L5.67702 14.8142C5.30174 15.1895 5.30174 15.7979 5.67702 16.1732L8.06384 18.56C8.43912 18.9353 9.04757 18.9353 9.42285 18.56L10.4809 17.502L10.8171 17.6555C11.9761 18.1843 13.3453 17.8827 14.1747 16.9157L20.8693 9.11159C21.8425 7.9771 21.7778 6.28452 20.7209 5.22761L19.0095 3.51624ZM16.1022 4.50634C16.6416 4.04362 17.4463 4.07437 17.9489 4.5769L19.6602 6.28827C20.1628 6.79079 20.1935 7.59555 19.7308 8.13496L14.6424 14.0667L10.1705 9.59469L16.1022 4.50634ZM9.02862 10.5742L8.29803 11.2009C7.83827 11.5953 7.69486 12.2462 7.94632 12.7973L8.2979 13.5678C8.43485 13.8679 8.37953 14.233 8.13377 14.4788L7.11884 15.4937L8.74335 17.1182L9.75818 16.1034C10.004 15.8576 10.3692 15.8023 10.6693 15.9392L11.4398 16.2908C11.9909 16.5423 12.6419 16.3989 13.0362 15.9391L13.663 15.2085L9.02862 10.5742Z" fill="#77757D"/>
|
|
`;
|
|
export const HighLightDuotoneIcon = icon(HighLightDuotoneSVG, 20);
|
|
|
|
export const ArrowRightBigIcon = icons.ArrowRightBigIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const ArrowLeftBigIcon = icons.ArrowLeftBigIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const ExpandWideIcon = icons.ExpandWideIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const ExpandFullIcon = icons.ExpandFullIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const ExpandCloseIcon = icons.ExpandCloseIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
|
|
export const MoveLeftIcon = icons.MoveLeftIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
export const MoveRightIcon = icons.MoveRightIcon({
|
|
width: '24',
|
|
height: '24',
|
|
});
|
|
export const ArrowUpBigIcon = icons.ArrowUpBigIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const ArrowDownBigIcon = icons.ArrowDownBigIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
export const PaletteIcon = icons.PaletteIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|
|
|
|
export const EmbedCardLightBannerIcon = html`<svg
|
|
width="340"
|
|
height="170"
|
|
viewBox="0 0 340 170"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0.000108291 4C4.84837e-05 1.79086 1.79086 0 4 0H336C338.209 0 340 1.79086 340 4L340.005 170H0.00460238L0.000108291 4Z"
|
|
fill="#F4F4F5"
|
|
/>
|
|
<path
|
|
d="M47.4226 181.578L133.723 53.5251C136.164 49.904 141.057 48.9089 144.718 51.2892L345.111 181.578H47.4226Z"
|
|
fill="#C0BFC1"
|
|
/>
|
|
<path
|
|
d="M0.00305283 184.375L71.1716 78.1816C73.6115 74.5409 78.5267 73.5413 82.195 75.9397L248.044 184.375H0.00305283Z"
|
|
fill="#E3E2E4"
|
|
/>
|
|
<ellipse
|
|
cx="19.6135"
|
|
cy="19.8036"
|
|
rx="19.6135"
|
|
ry="19.8036"
|
|
transform="matrix(1 0 2.70729e-05 1 38 17)"
|
|
fill="#C0BFC1"
|
|
/>
|
|
</svg>`;
|
|
|
|
export const EmbedCardDarkBannerIcon = html`<svg
|
|
width="340"
|
|
height="170"
|
|
viewBox="0 0 340 170"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0.000108291 4C4.84837e-05 1.79086 1.79086 0 4 0H336C338.209 0 340 1.79086 340 4L340.005 170H0.00460238L0.000108291 4Z"
|
|
fill="#252525"
|
|
/>
|
|
<path
|
|
d="M47.4226 181.578L133.723 53.5251C136.164 49.904 141.057 48.9089 144.718 51.2892L345.111 181.578H47.4226Z"
|
|
fill="#3E3E3F"
|
|
/>
|
|
<path
|
|
d="M0.00305283 184.375L71.1716 78.1816C73.6115 74.5409 78.5267 73.5413 82.195 75.9397L248.044 184.375H0.00305283Z"
|
|
fill="#727272"
|
|
/>
|
|
<ellipse
|
|
cx="19.6135"
|
|
cy="19.8036"
|
|
rx="19.6135"
|
|
ry="19.8036"
|
|
transform="matrix(1 0 2.70729e-05 1 38 17)"
|
|
fill="#3E3E3F"
|
|
/>
|
|
</svg>`;
|
|
|
|
export const EmbedCardLightHorizontalIcon = html`
|
|
<svg
|
|
width="70"
|
|
height="32"
|
|
viewBox="0 0 70 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="0.25" y="0.25" width="69.5" height="31.5" rx="3.75" fill="white" />
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="31.5"
|
|
rx="3.75"
|
|
stroke="#E3E2E4"
|
|
stroke-width="0.5"
|
|
/>
|
|
<rect x="4" y="4" width="21" height="3" rx="1.5" fill="#DBDBDB" />
|
|
<rect x="4" y="11" width="34.1467" height="2" rx="1" fill="#E9E9E9" />
|
|
<rect x="4" y="17" width="34.1467" height="2" rx="1" fill="#E9E9E9" />
|
|
<rect x="4" y="23" width="30" height="2" rx="1" fill="#E9E9E9" />
|
|
<g clip-path="url(#clip0_8629_12484)">
|
|
<rect
|
|
width="23.8527"
|
|
height="24"
|
|
rx="2"
|
|
transform="matrix(1 0 2.70729e-05 1 42.1467 4)"
|
|
fill="#EDEDED"
|
|
/>
|
|
<path
|
|
d="M47.0005 30.0001L57.6988 14.2824C58.6142 12.9375 60.4347 12.5674 61.8027 13.448L87.5143 30.0001H47.0005Z"
|
|
fill="#CCCCCC"
|
|
/>
|
|
<circle
|
|
cx="2.10328"
|
|
cy="2.10328"
|
|
r="2.10328"
|
|
transform="matrix(1 0 2.70729e-05 1 47.7163 9)"
|
|
fill="#CCCCCC"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_8629_12484">
|
|
<rect
|
|
width="23.8527"
|
|
height="24"
|
|
rx="2"
|
|
transform="matrix(1 0 2.70729e-05 1 42.1467 4)"
|
|
fill="white"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardDarkHorizontalIcon = html`
|
|
<svg
|
|
width="70"
|
|
height="32"
|
|
viewBox="0 0 70 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="31.5"
|
|
rx="3.75"
|
|
fill="#141414"
|
|
/>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="31.5"
|
|
rx="3.75"
|
|
stroke="#484848"
|
|
stroke-width="0.5"
|
|
/>
|
|
<rect x="4" y="4" width="21" height="3" rx="1.5" fill="#4A4A4A" />
|
|
<rect x="4" y="11" width="34.1467" height="2" rx="1" fill="#323232" />
|
|
<rect x="4" y="17" width="34.1467" height="2" rx="1" fill="#323232" />
|
|
<rect x="4" y="23" width="30" height="2" rx="1" fill="#323232" />
|
|
<g clip-path="url(#clip0_8635_14321)">
|
|
<rect
|
|
width="23.8527"
|
|
height="24"
|
|
rx="2"
|
|
transform="matrix(1 0 2.70729e-05 1 42.1467 4)"
|
|
fill="#2E2E2E"
|
|
/>
|
|
<path
|
|
d="M47.0005 30.0001L57.6988 14.2824C58.6142 12.9375 60.4347 12.5674 61.8027 13.448L87.5143 30.0001H47.0005Z"
|
|
fill="#5D5D5D"
|
|
/>
|
|
<circle
|
|
cx="2.10328"
|
|
cy="2.10328"
|
|
r="2.10328"
|
|
transform="matrix(1 0 2.70729e-05 1 47.7163 9)"
|
|
fill="#5D5D5D"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_8635_14321">
|
|
<rect
|
|
width="23.8527"
|
|
height="24"
|
|
rx="2"
|
|
transform="matrix(1 0 2.70729e-05 1 42.1467 4)"
|
|
fill="white"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardLightListIcon = html`
|
|
<svg
|
|
width="70"
|
|
height="14"
|
|
viewBox="0 0 70 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="0.25" y="0.25" width="69.5" height="13.5" rx="2.75" fill="white" />
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="13.5"
|
|
rx="2.75"
|
|
stroke="#E3E2E4"
|
|
stroke-width="0.5"
|
|
/>
|
|
<circle cx="6.5" cy="7" r="2.5" fill="#D9D9D9" />
|
|
<rect x="13" y="5" width="53" height="4" rx="2" fill="#DBDBDB" />
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardDarkListIcon = html`
|
|
<svg
|
|
width="70"
|
|
height="14"
|
|
viewBox="0 0 70 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="13.5"
|
|
rx="2.75"
|
|
fill="#141414"
|
|
/>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="69.5"
|
|
height="13.5"
|
|
rx="2.75"
|
|
stroke="#484848"
|
|
stroke-width="0.5"
|
|
/>
|
|
<circle cx="6.5" cy="7" r="2.5" fill="#4A4A4A" />
|
|
<rect x="13" y="5" width="53" height="4" rx="2" fill="#4A4A4A" />
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardLightVerticalIcon = html`
|
|
<svg
|
|
width="60"
|
|
height="66"
|
|
viewBox="0 0 60 66"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
x="0.25"
|
|
y="1.10718"
|
|
width="59.5"
|
|
height="63.7857"
|
|
rx="3.75"
|
|
fill="white"
|
|
/>
|
|
<rect
|
|
x="0.25"
|
|
y="1.10718"
|
|
width="59.5"
|
|
height="63.7857"
|
|
rx="3.75"
|
|
stroke="#E3E2E4"
|
|
stroke-width="0.5"
|
|
/>
|
|
<g clip-path="url(#clip0_8629_12498)">
|
|
<path
|
|
d="M3.00005 5.85718C3.00002 4.75261 3.89543 3.85718 5 3.85718H55C56.1046 3.85718 57 4.75261 57.0001 5.85718L57.0008 34.7143H3.00084L3.00005 5.85718Z"
|
|
fill="#EDEDED"
|
|
/>
|
|
<path
|
|
d="M18.0007 37.3179L33.5882 14.4172C34.5036 13.0723 36.3241 12.7021 37.692 13.5828L74.5616 37.3179H18.0007Z"
|
|
fill="#CCCCCC"
|
|
/>
|
|
<circle
|
|
cx="2.93637"
|
|
cy="2.93637"
|
|
r="2.93637"
|
|
transform="matrix(1 0 2.70729e-05 1 19 8)"
|
|
fill="#CCCCCC"
|
|
/>
|
|
</g>
|
|
<rect x="3" y="38.7144" width="30" height="3" rx="1.5" fill="#DBDBDB" />
|
|
<rect x="3" y="45.7144" width="54" height="3" rx="1.5" fill="#E9E9E9" />
|
|
<rect x="3" y="52.7144" width="54" height="3" rx="1.5" fill="#E9E9E9" />
|
|
<defs>
|
|
<clipPath id="clip0_8629_12498">
|
|
<path
|
|
d="M3.00005 5.85718C3.00002 4.75261 3.89543 3.85718 5 3.85718H55C56.1046 3.85718 57 4.75261 57.0001 5.85718L57.0008 34.7143H3.00084L3.00005 5.85718Z"
|
|
fill="white"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardDarkVerticalIcon = html`
|
|
<svg
|
|
width="60"
|
|
height="66"
|
|
viewBox="0 0 60 66"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
x="0.25"
|
|
y="1.10718"
|
|
width="59.5"
|
|
height="63.7857"
|
|
rx="3.75"
|
|
fill="#141414"
|
|
/>
|
|
<rect
|
|
x="0.25"
|
|
y="1.10718"
|
|
width="59.5"
|
|
height="63.7857"
|
|
rx="3.75"
|
|
stroke="#484848"
|
|
stroke-width="0.5"
|
|
/>
|
|
<g clip-path="url(#clip0_8635_14335)">
|
|
<path
|
|
d="M3.00005 5.85718C3.00002 4.75261 3.89543 3.85718 5 3.85718H55C56.1046 3.85718 57 4.75261 57.0001 5.85718L57.0008 34.7143H3.00084L3.00005 5.85718Z"
|
|
fill="#2E2E2E"
|
|
/>
|
|
<path
|
|
d="M18.0007 37.3179L33.5882 14.4172C34.5036 13.0723 36.3241 12.7021 37.692 13.5828L74.5616 37.3179H18.0007Z"
|
|
fill="#5D5D5D"
|
|
/>
|
|
<circle
|
|
cx="2.93637"
|
|
cy="2.93637"
|
|
r="2.93637"
|
|
transform="matrix(1 0 2.70729e-05 1 19 8)"
|
|
fill="#5D5D5D"
|
|
/>
|
|
</g>
|
|
<rect x="3" y="38.7144" width="30" height="3" rx="1.5" fill="#4A4A4A" />
|
|
<rect x="3" y="45.7144" width="54" height="3" rx="1.5" fill="#323232" />
|
|
<rect x="3" y="52.7144" width="54" height="3" rx="1.5" fill="#323232" />
|
|
<defs>
|
|
<clipPath id="clip0_8635_14335">
|
|
<path
|
|
d="M3.00005 5.85718C3.00002 4.75261 3.89543 3.85718 5 3.85718H55C56.1046 3.85718 57 4.75261 57.0001 5.85718L57.0008 34.7143H3.00084L3.00005 5.85718Z"
|
|
fill="white"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardLightCubeIcon = html`
|
|
<svg
|
|
width="38"
|
|
height="30"
|
|
viewBox="0 0 38 30"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="0.25" y="0.25" width="37.5" height="29.5" rx="3.75" fill="white" />
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="37.5"
|
|
height="29.5"
|
|
rx="3.75"
|
|
stroke="#E3E2E4"
|
|
stroke-width="0.5"
|
|
/>
|
|
<circle cx="6.5" cy="6.5" r="2.5" fill="#D9D9D9" />
|
|
<rect x="4" y="13" width="30" height="3" rx="1.5" fill="#E9E9E9" />
|
|
<rect x="4" y="20" width="30" height="3" rx="1.5" fill="#E9E9E9" />
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedCardDarkCubeIcon = html`
|
|
<svg
|
|
width="38"
|
|
height="30"
|
|
viewBox="0 0 38 30"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="37.5"
|
|
height="29.5"
|
|
rx="3.75"
|
|
fill="#141414"
|
|
/>
|
|
<rect
|
|
x="0.25"
|
|
y="0.25"
|
|
width="37.5"
|
|
height="29.5"
|
|
rx="3.75"
|
|
stroke="#484848"
|
|
stroke-width="0.5"
|
|
/>
|
|
<circle cx="6.5" cy="6.5" r="2.5" fill="#4A4A4A" />
|
|
<rect x="4" y="13" width="30" height="3" rx="1.5" fill="#4A4A4A" />
|
|
<rect x="4" y="20" width="30" height="3" rx="1.5" fill="#4A4A4A" />
|
|
</svg>
|
|
`;
|
|
|
|
export const EmbedPageIcon = icons.LinkedPageIcon({
|
|
width: '16',
|
|
height: '16',
|
|
});
|
|
|
|
export const EmbedEdgelessIcon = icons.LinkedEdgelessIcon({
|
|
width: '16',
|
|
height: '16',
|
|
});
|
|
|
|
export const LinkedDocIcon = icons.LinkedPageIcon({
|
|
width: '20',
|
|
height: '20',
|
|
});
|