yoyoo-ui

Appearance

Icon / HSIcon 图标 ​

基于 iconfont.cn 的自定义图标组件。组件名为 HSIcon，注册为 <hs-icon> 标签。

基础用法 ​

tsx
import { defineComponent } from 'vue'
import HSIcon from '@/components/Icon'

// 所有可用图标名称
const iconNames = [
  'diff', 'loading', 'warning', 'warning-2', 'download', 'calendar',
  'files', 'arrow-right', 'delete', 'user', 'lock', 'close', 'upload',
  'rotate-left', 'warning-circle', 'arrow-left', 'rotate-right',
  'search', 'menu', 'edit', 'protect', 'search-content',
] as const

export default defineComponent({
  name: 'DemoIconBasic',
  setup() {
    return () => (
      <div class="demo-block">
        <div style="display:flex; flex-direction:column; gap:16px;">

          <div style="font-size:13px; color:#666; line-height:1.6;">
            图标使用 iconfont（<a href="https://www.iconfont.cn" target="_blank">iconfont.cn</a>）作为图标库，
            通过 <code>HSIcon</code> 或 <code>Icon</code> 组件使用。支持通过 <code>style</code> 设置大小和颜色。
          </div>

          <div style="display:flex; gap:24px; align-items:center; flex-wrap:wrap;">
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:28px; color:#409eff;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">user</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="edit" style="font-size:28px; color:#67c23a;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">edit</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="delete" style="font-size:28px; color:#f56c6c;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">delete</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="search" style="font-size:28px; color:#e6a23c;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">search</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="download" style="font-size:28px; color:#909399;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">download</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="upload" style="font-size:28px;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">upload</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="loading" style="font-size:28px;" />
              <div style="font-size:12px; color:#999; margin-top:4px;">loading</div>
            </div>
          </div>

          <div style="font-size:14px; font-weight:600; color:#333; margin-top:8px;">全部图标预览</div>
          <div style="display:flex; gap:16px; flex-wrap:wrap;">
            {iconNames.map((name) => (
              <div style="text-align:center; width:80px; padding:12px 0;">
                <HSIcon name={name} style="font-size:24px;" />
                <div style="font-size:11px; color:#999; margin-top:6px; word-break:break-all;">{name}</div>
              </div>
            ))}
          </div>

          <div style="font-size:14px; font-weight:600; color:#333; margin-top:8px;">尺寸与颜色示例</div>
          <div style="display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;">
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:14px;" />
              <div style="font-size:11px; color:#999;">14px</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:20px;" />
              <div style="font-size:11px; color:#999;">20px</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:28px;" />
              <div style="font-size:11px; color:#999;">28px</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:36px;" />
              <div style="font-size:11px; color:#999;">36px</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:36px; color:#409eff;" />
              <div style="font-size:11px; color:#999;">蓝色</div>
            </div>
            <div style="text-align:center;">
              <HSIcon name="user" style="font-size:36px; color:#f56c6c;" />
              <div style="font-size:11px; color:#999;">红色</div>
            </div>
          </div>

        </div>
      </div>
    )
  },
})

Props ​

属性名类型说明
nameIconName图标名称，对应 iconfont 图标的类名（如 user）

提示： name 属性的类型定义由 script/generate-icon-types.mjs 自动从 iconfont.css 提取生成。替换字体文件后运行该脚本即可自动同步，TypeScript 中获得完整的枚举提示和校验。

大小和颜色通过 style 属性设置，如 style="font-size:24px; color:#409eff;"。

如何添加新图标 ​

1. 在 iconfont 中选择图标 ​

  • 打开 iconfont.cn
  • 登录后搜索或浏览需要的图标
  • 点击"添加入库"

2. 下载并替换字体文件 ​

  • 在 iconfont 的"我的项目"中，选择"下载到本地"
  • 解压后将以下文件复制到 src/components/Icon/src/：
    • iconfont.ttf
    • iconfont.woff
    • iconfont.woff2
  • 将 iconfont.css 中的 @font-face 的 src 路径改为相对路径：
css
@font-face {
  font-family: "hsxl-icon";
  src: url('./iconfont.woff2?t=xxx') format('woff2'),
       url('./iconfont.woff?t=xxx') format('woff'),
       url('./iconfont.ttf?t=xxx') format('truetype');
}

3. 运行脚本生成类型定义 ​

bash
npx tsx icon-type.ts
# 或
pnpm icons

脚本自动从 iconfont.css 中提取所有 .icon-xxx 名称，同步生成：

  • src/components/Icon/src/icon-type.ts — TypeScript 类型（name 属性获得枚举提示和校验）
  • src/examples/icon/icon-names.ts — 图标名称数组

4. 使用新图标 ​

tsx
<HSIcon name="new-icon-name" style="font-size:24px; color:#409eff;" />

内置图标列表 ​

图标名说明图标名说明
diff差异loading加载
warning警告warning-2警告2
download下载calendar日历
files文件arrow-right右箭头
delete删除user用户
lock锁close关闭
upload上传rotate-left左旋转
warning-circle圆形警告arrow-left左箭头
rotate-right右旋转search搜索
menu菜单edit编辑
protect保护search-content内容搜索

yoyoo-ui 版权所有