Vite使用svg-企业级开发(支持本地svg和网络svg渲染)

Martin-Luo

已于 2023-09-19 14:49:05 修改

阅读量338

点赞数 1

分类专栏： # Vue3 文章标签： javascript vue.js js vue 前端

于 2023-09-19 14:48:48 首次发布

本文链接：https://blog.csdn.net/Dragon_Luo/article/details/133027931

版权

1. 安装vite-plugin-svg-icons插件

$ yarn add vite-plugin-svg-icons -D
# or
$ npm install vite-plugin-svg-icons -D

2. 插件配置

配置插件在vite.config.ts

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

export default () => {
   
  return {
   
    plugins: [
      createSvgIconsPlugin({
   
        // 指定要缓存的图标文件夹<**必须和你存放svg文件夹路径一致**>
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式<可以保持默认格式>
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置<选填>
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'
        /**
         * 自定义dom id <可以保持默认格式>
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
    ],