diff --git a/blocksuite/presets/src/fragments/_common/icons.ts b/blocksuite/presets/src/fragments/_common/icons.ts deleted file mode 100644 index 224f8eb4d6..0000000000 --- a/blocksuite/presets/src/fragments/_common/icons.ts +++ /dev/null @@ -1,427 +0,0 @@ -import { html } from 'lit'; - -export const SmallFrameNavigatorIcon = html` - -`; - -export const SettingsIcon = html` - - - -`; - -export const BlockPreviewIcon = html` - -`; - -export const SmallTextIcon = html` - -`; - -export const SmallHeading1Icon = html` - -`; - -export const SmallHeading2Icon = html` - -`; - -export const SmallHeading3Icon = html` - -`; - -export const SmallHeading4Icon = html` - -`; - -export const SmallHeading5Icon = html` - -`; - -export const SmallHeading6Icon = html` - -`; - -export const SmallCodeBlockIcon = html` - -`; - -export const SmallQuoteBlockIcon = html` - -`; - -export const SmallNumberListIcon = html` - -`; - -export const SmallBulletListIcon = html` - -`; - -export const SmallTodoIcon = html` - -`; - -export const SmallBookmarkIcon = html` - -`; - -export const SmallImageIcon = html` - -`; - -export const SmallDatabaseTableIcon = html` - -`; - -export const SmallDatabaseKanbanIcon = html` - -`; - -export const SmallAttachmentIcon = html` - -`; - -export const SmallLinkedDocIcon = html` - -`; - -export const SmallDeleteIcon = html` - -`; - -export const SortingIcon = html` - -`; - -export const ArrowLeftIcon = html` - - `; - -export const ArrowJumpIcon = html` - - - - - - - - - `; - -export const HiddenIcon = html` - -`; - -export const SmallArrowDownIcon = html` - -`; - -export const SmallCloseIcon = html` - -`; - -export const TocIcon = html` - - - - -`; diff --git a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts b/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts index 9744725d87..b193910153 100644 --- a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts +++ b/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts @@ -8,11 +8,10 @@ import { type NavigatorMode, } from '@blocksuite/blocks'; import { DisposableGroup, WithDisposable } from '@blocksuite/global/utils'; +import { PresentationIcon, SettingsIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, type PropertyValues } from 'lit'; import { property, query, state } from 'lit/decorators.js'; -import { SettingsIcon, SmallFrameNavigatorIcon } from '../../_common/icons.js'; - const styles = css` :host { display: flex; @@ -201,7 +200,7 @@ export class FramePanelHeader extends WithDisposable(LitElement) { .activeMode=${'background'} @click=${() => this._framesSettingMenuPopper?.toggle()} > - ${SettingsIcon} + ${SettingsIcon({ width: '20px', height: '20px' })}
@@ -210,7 +209,8 @@ export class FramePanelHeader extends WithDisposable(LitElement) { >
- ${SmallFrameNavigatorIcon}Presentation
diff --git a/blocksuite/presets/src/fragments/outline/body/outline-notice.ts b/blocksuite/presets/src/fragments/outline/body/outline-notice.ts index ccbd1f09e4..13e13ceb9c 100644 --- a/blocksuite/presets/src/fragments/outline/body/outline-notice.ts +++ b/blocksuite/presets/src/fragments/outline/body/outline-notice.ts @@ -1,9 +1,9 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; +import { CloseIcon, SortIcon } from '@blocksuite/icons/lit'; import { html, nothing } from 'lit'; import { property } from 'lit/decorators.js'; -import { SmallCloseIcon, SortingIcon } from '../../_common/icons.js'; import * as styles from './outline-notice.css'; export const AFFINE_OUTLINE_NOTICE = 'affine-outline-notice'; @@ -26,7 +26,7 @@ export class OutlineNotice extends WithDisposable(ShadowlessElement) { this.setNoticeVisibility(false)} - >${SmallCloseIcon}${CloseIcon({ width: '16px', height: '16px' })}
@@ -35,7 +35,9 @@ export class OutlineNotice extends WithDisposable(ShadowlessElement) {
Click here or - ${SortingIcon} + ${SortIcon({ width: '20px', height: '20px' })} to organize content.
diff --git a/blocksuite/presets/src/fragments/outline/card/outline-card.ts b/blocksuite/presets/src/fragments/outline/card/outline-card.ts index 811f4ff4aa..cc96a79473 100644 --- a/blocksuite/presets/src/fragments/outline/card/outline-card.ts +++ b/blocksuite/presets/src/fragments/outline/card/outline-card.ts @@ -7,11 +7,11 @@ import { once, } from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; +import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit'; import type { BlockModel } from '@blocksuite/store'; import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; -import { HiddenIcon, SmallArrowDownIcon } from '../../_common/icons'; import type { SelectEvent } from '../utils/custom-events'; import * as styles from './outline-card.css'; @@ -153,7 +153,9 @@ export class OutlineNoteCard extends SignalWatcher( ${html`
${ this.invisible - ? html`${HiddenIcon}` + ? html`${InvisibleIcon({ width: '20px', height: '20px' })}` : html`${this.number}` } @@ -172,7 +174,7 @@ export class OutlineNoteCard extends SignalWatcher( >
${currentMode} - ${SmallArrowDownIcon} + ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
diff --git a/blocksuite/presets/src/fragments/outline/config.ts b/blocksuite/presets/src/fragments/outline/config.ts index 953ee33b8b..a1c0ba7baf 100644 --- a/blocksuite/presets/src/fragments/outline/config.ts +++ b/blocksuite/presets/src/fragments/outline/config.ts @@ -1,55 +1,57 @@ import type { ParagraphBlockModel } from '@blocksuite/blocks'; +import { + AttachmentIcon, + BlockIcon, + BookmarkIcon, + BulletedListIcon, + CheckBoxCheckLinearIcon, + CodeBlockIcon, + DatabaseKanbanViewIcon, + DatabaseTableViewIcon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + Heading4Icon, + Heading5Icon, + Heading6Icon, + ImageIcon, + NumberedListIcon, + QuoteIcon, + TextIcon, +} from '@blocksuite/icons/lit'; import { createContext } from '@lit/context'; import type { TemplateResult } from 'lit'; import type { AffineEditorContainer } from '../../editors/editor-container.js'; -import { - BlockPreviewIcon, - SmallAttachmentIcon, - SmallBookmarkIcon, - SmallBulletListIcon, - SmallCodeBlockIcon, - SmallDatabaseKanbanIcon, - SmallDatabaseTableIcon, - SmallHeading1Icon, - SmallHeading2Icon, - SmallHeading3Icon, - SmallHeading4Icon, - SmallHeading5Icon, - SmallHeading6Icon, - SmallImageIcon, - SmallNumberListIcon, - SmallQuoteBlockIcon, - SmallTextIcon, - SmallTodoIcon, -} from '../_common/icons.js'; + +const _16px = { width: '16px', height: '16px' }; const paragraphIconMap: Record< ParagraphBlockModel['type'], TemplateResult<1> > = { - quote: SmallQuoteBlockIcon, - text: SmallTextIcon, - h1: SmallHeading1Icon, - h2: SmallHeading2Icon, - h3: SmallHeading3Icon, - h4: SmallHeading4Icon, - h5: SmallHeading5Icon, - h6: SmallHeading6Icon, + quote: QuoteIcon(_16px), + text: TextIcon(_16px), + h1: Heading1Icon(_16px), + h2: Heading2Icon(_16px), + h3: Heading3Icon(_16px), + h4: Heading4Icon(_16px), + h5: Heading5Icon(_16px), + h6: Heading6Icon(_16px), }; export const previewIconMap = { ...paragraphIconMap, - code: SmallCodeBlockIcon, - numbered: SmallNumberListIcon, - bulleted: SmallBulletListIcon, - todo: SmallTodoIcon, - toggle: BlockPreviewIcon, - bookmark: SmallBookmarkIcon, - image: SmallImageIcon, - table: SmallDatabaseTableIcon, - kanban: SmallDatabaseKanbanIcon, - attachment: SmallAttachmentIcon, + code: CodeBlockIcon(_16px), + numbered: NumberedListIcon(_16px), + bulleted: BulletedListIcon(_16px), + todo: CheckBoxCheckLinearIcon(_16px), + toggle: BlockIcon(_16px), + bookmark: BookmarkIcon(_16px), + image: ImageIcon(_16px), + table: DatabaseTableViewIcon(_16px), + kanban: DatabaseKanbanViewIcon(_16px), + attachment: AttachmentIcon(_16px), }; const paragraphPlaceholderMap: Record = { diff --git a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts b/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts index 09e67db0e5..ad00ffd407 100644 --- a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts +++ b/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts @@ -1,10 +1,10 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { createButtonPopper } from '@blocksuite/blocks'; import { WithDisposable } from '@blocksuite/global/utils'; +import { SettingsIcon, SortIcon } from '@blocksuite/icons/lit'; import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; -import { SettingsIcon, SortingIcon } from '../../_common/icons.js'; import * as styles from './outline-panel-header.css'; export const AFFINE_OUTLINE_PANEL_HEADER = 'affine-outline-panel-header'; @@ -43,7 +43,7 @@ export class OutlinePanelHeader extends WithDisposable(ShadowlessElement) { .activeMode=${'background'} @click=${() => this._notePreviewSettingMenuPopper?.toggle()} > - ${SettingsIcon} + ${SettingsIcon({ width: '20px', height: '20px' })} this.toggleNotesSorting()} > - ${SortingIcon} + ${SortIcon({ width: '20px', height: '20px' })}
diff --git a/blocksuite/presets/src/fragments/outline/outline-viewer.ts b/blocksuite/presets/src/fragments/outline/outline-viewer.ts index 2384dbf5b3..d55b8194b6 100644 --- a/blocksuite/presets/src/fragments/outline/outline-viewer.ts +++ b/blocksuite/presets/src/fragments/outline/outline-viewer.ts @@ -5,6 +5,7 @@ import { } from '@blocksuite/block-std'; import { NoteDisplayMode, scrollbarStyle } from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; +import { TocIcon } from '@blocksuite/icons/lit'; import { provide } from '@lit/context'; import { signal } from '@preact/signals-core'; import { css, html, nothing } from 'lit'; @@ -13,7 +14,6 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import type { AffineEditorContainer } from '../../editors/editor-container.js'; -import { TocIcon } from '../_common/icons.js'; import { editorContext } from './config.js'; import { getHeadingBlocksFromDoc } from './utils/query.js'; import { @@ -227,7 +227,7 @@ export class OutlineViewer extends SignalWatcher( @click=${this._toggleOutlinePanel} data-testid="toggle-outline-panel-button" > - ${TocIcon} + ${TocIcon({ width: '1em', height: '1em' })} ` : nothing;