iconfont的SVG图标如何使用配置

原创

已于 2025-01-11 17:26:15 修改 · 529 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2025-01-11 17:11:02 首次发布

1. 首先登陆iconfont的官网，找到需要图标，复制图标的svg

iconfont-阿里巴巴矢量图标库
|

2. 安装SVG依赖插件

npm install vite-plugin-svg-icons -D
npm install fast-glob

在vite.config.ts中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(),
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // Specify symbolId format
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
})