知识森林

Appearance

On this page

字体图标库 ​

为了方便在开发中使用图标，这里将常用的图标转换为了字体图标，虽然这样在初始化时候会消耗部分性能。

常用字体图标 ​

自定义svg图标 ​

如果图标库中无法满足我们的需求，我们可以引入svg图标，具体的引入步骤如下:

ts
// 第一步：安装vite插件
yarn add vite-plugin-svg-icons -D

// 第二步：在vite中使用插件 vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

plugins: [
    createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        svgoOptions: command === 'build',
        symbolId: 'icon-[dir]-[name]',
    }),
    ......
]

// 第三步：在main.ts中注册图标 main.ts
import 'virtual:svg-icons-register'

// 第四步：使用 假如我们有个svg图标，位置为：assets/icons/404.svg
<DtIcon icon-class="404" :size="200"></DtIcon>

svg图标API ​

属性说明类型默认值版本
iconClasssvg图标的文件名string
className给svg定义类名,多个class用空格分开string
color图标颜色string#555
size图标大小，单位(px)number18