Icon

Svg图标封装

配置

安装依赖。插件仓库地址

pnpm add -D vite-plugin-svg-icons

vite 配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export function configSvgIconsPlugin(isBuild: boolean) {
  const svgIconsPlugin = createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    svgoOptions: isBuild,
    symbolId: 'icon-[dir]-[name]'
  })
  return svgIconsPlugin
}

main.ts

// 引入插件
import 'virtual:svg-icons-register'

使用

将阿里图标库、Arco图标库、字节跳动图标库、Bootstrap图标库下载的svg放到在src/assets/icons文件夹中

TIP

如果size和颜色不能正确显示的时候需要确定svg文件中的fill/width/height属性有没有去掉

<n-icon name="setting" />
<n-icon name="setting" size="20px"/>

如果说你配置的文件夹src/assets/icons下有子级文件夹，比如说src/assets/icons/menus、src/assets/icons/layouts，那么在设置NIcon图标名称的时候name需要加上子级文件夹的名称用-隔开。

示例：

<n-icon name="layouts-setting" />

Props

Name	Description	Type	Options	Default
name	图标名称	string	-	-
size	图标大小	`string	number`	-
spin	是否启用旋转模式	boolean	-	false
color	图标颜色	string	-	-