vue3 svg使用、vue/cli 使用svg

1、vue3 svg使用

安装插件

npm i vite-plugin-svg-icons -D
//or
pnpm i vite-plugin-svg-icons -D


#如果报错Cannot find package 'fast-glob' 
安装插件 yarn add fast-glob -D

配置插件

• vite.config.ts

  import {resolve} from 'path'
  
  //引入插件
  import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    //插件
    plugins: [
      //...  
      createSvgIconsPlugin({
        // 指定要缓存的文件夹 icons文件夹里面全是svg图标
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式  使用时候 记得加#
        symbolId: '[name]',
      }),
    ],
  })
  

注册svg图标

• main.ts

  import 'virtual:svg-icons-register'
  

直接使用

• 图片test.svg

  <svg width="45" height="36" fill="rgb(217, 217, 217)">
      <path
          d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z" />
  </svg>
  
  #fill 控制图片默认颜色 建议删除 不然可能后续颜色加不上
  <svg width="45" height="36" >
      <path
          d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z" />
  </svg>
  

• 使用

封装组件

• components/SvgIcon/index.vue

全局注册组件

• main.ts

import {createApp} from 'vue'
import App from './App.vue'
//抽离全局app
const app = createApp(App)


//注册全局组件
// app.component('组件名',组件实例)
//引入组件
import SvgIcon from './components/SvgIcon/index.vue'

//注册全局组件
app.component('SvgIcon', SvgIcon)

使用组件

2、vue/cli 使用svg

安装svg-sprite-loader插件

npm install svg-sprite-loader --save-dev

图标目录 src/assets/icons 里面全是svg图标

配置插件解析svg

• vue.config.js

const {defineConfig} = require('@vue/cli-service')

const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    // 原svg规则覆盖了所有的svg图标，需要先将自己的svg排除，以应用新的sprite规则
    // src/assets/icons是我们将要存放svg的目录
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons')) // 排除自定义svg目录
      .end()
    config.module
      .rule('icons') // 新规则
      .test(/\.svg$/)
      .include.add(path.join(__dirname, 'src/assets/icons')) // 新规则应用于我们存放svg的目录
      .end()
      .use('svg-sprite-loader') // 用sprite-loader接卸
      .loader('svg-sprite-loader')
      .options({
        symbolId: '[name]',
      })
      .end()
  },
})

封装svg组件

• src/components/SvgIcon.vue

main.ts 全局引入注册

// 1. 全局注册SvgIcon组件
app.component('svg-icon', SvgIcon)
// 2. 载入所有svg icon
const requireContext = require.context('./assets/icons', false, /\.svg$/)
requireContext.keys().forEach(requireContext)

使用Svg组件

name是名称 color是颜色