73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
import { ICON_NAMES, Icon, Input, Space, type IconName } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Icons() {
|
|
const [keyword, setKeyword] = useState('')
|
|
const [copied, setCopied] = useState<IconName | null>(null)
|
|
|
|
const visible = useMemo(() => {
|
|
const query = keyword.trim().toLowerCase()
|
|
return query === '' ? ICON_NAMES : ICON_NAMES.filter((name) => name.includes(query))
|
|
}, [keyword])
|
|
|
|
const copy = (name: IconName) => {
|
|
const task = navigator.clipboard?.writeText(name)
|
|
task?.catch(() => undefined)
|
|
setCopied(name)
|
|
window.setTimeout(() => setCopied((current) => (current === name ? null : current)), 1200)
|
|
}
|
|
|
|
return (
|
|
<Section
|
|
id="icons"
|
|
title="图标"
|
|
api="Icon"
|
|
desc={`参考站 iconfont 的全量字形（${ICON_NAMES.length} 个，字体 52KB）。线性和填充成对出现，命名规则是「名字_风格」：search_line / search_fill、arrow_left_line / arrow_left_fill。点任意一格可以复制图标名。`}
|
|
>
|
|
<Demo
|
|
title="全部字形"
|
|
desc="按名字过滤（试试 arrow、fill、user），点击复制 `<Icon name=… />` 里的名字。"
|
|
layout="column"
|
|
code={`<Icon name="search_3_line" />
|
|
<Icon name="arrow_left_line" style={{ fontSize: 20 }} />`}
|
|
>
|
|
<Space gap="md" wrap>
|
|
<Input
|
|
icon="search_3_line"
|
|
placeholder="过滤图标名，如 arrow / fill / user…"
|
|
value={keyword}
|
|
onChange={(event) => setKeyword(event.target.value)}
|
|
clearable
|
|
onClear={() => setKeyword('')}
|
|
style={{ width: 300 }}
|
|
/>
|
|
<span className="icon-count">
|
|
{visible.length} / {ICON_NAMES.length}
|
|
</span>
|
|
</Space>
|
|
|
|
<div className="icon-wall icon-wall--scroll">
|
|
{visible.map((name) => (
|
|
<button
|
|
type="button"
|
|
className="icon-cell"
|
|
key={name}
|
|
title={`复制 ${name}`}
|
|
onClick={() => copy(name)}
|
|
>
|
|
<Icon name={name} />
|
|
<code>{copied === name ? '已复制' : name}</code>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{visible.length === 0 && (
|
|
<p className="icon-empty">没有匹配「{keyword.trim()}」的图标，换个关键词试试。</p>
|
|
)}
|
|
</Demo>
|
|
</Section>
|
|
)
|
|
}
|