YsSvgIcon 引入svg图标

建议

建议使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。

unplugin-icons 自动引入

pnpm install unplugin-icons unplugin-auto-import -D

vite.config.ts

plugins: [
  AutoImport({
    resolvers: [
      ...IconsResolver({
        prefix: 'Icon'
      })
    ]
  }),
  Components({
    resolvers: [
      ...IconsResolver({
        enabledCollections: ['ep']
      })
    ]
  }),
  Icons({
    autoInstall: true,
    compiler: 'vue3'
  })
]

使用方式 icon文档链接地址

<i-ep-credit-card />

使用本地的 svg文件

1. 这里使用vite-plugin-svg-icons插件完成，首先在项目根目录安装插件

pnpm install vite-plugin-svg-icons -D

2. main.ts/main.js引入

import 'virtual:svg-icons-register'

3. vite.config.ts/vite.config.js配置plugins

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

function resolve(dir) {
  return path.join(__dirname, dir)
}

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'ys-icon-[name]'
    })
  ]
})

4. 配置svg图片文件夹，把.svg图片放到src/assets/icons目录

props属性

属性名	说明	类型	可选参数	是否必传
iconClass	svg名称，不加.svg后缀	string	--	是
color	fill颜色	string	--

示例

---

本地文件引入 ys-svg-icon

<ys-svg-icon icon-class="svg名称" :color="#409EFF" />

unplugin-icons 自动引入