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格式  使用时候<use :xlink:href="'#'+name" :fill="color"></use> 记得加#
        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>
  

• 使用

  <template>
    //test 是svg图标名称  symbolId: '[name]' 可以自定义  但是#前缀必须加
    //fill="red" fill 可以加颜色
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#test" fill="red"></use>
    </svg>
  
  </template>
  
  
  <style lang="scss" scoped>
  .icon {
    #vertical-align为了避免样式出问题
    vertical-align: -0.15em;
    #fill 属性运行填充颜色
    fill: currentColor;
    overflow: hidden;
    #宽高可控
    width: 2em;
    height: 2em;
  }
  </style>
  

封装组件

• components/SvgIcon/index.vue

  <template>
    <svg :style="{color: color}" class="icon" :class="svgSize" aria-hidden="true">
      <use :xlink:href="'#'+name" :fill="color"></use>
    </svg>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  interface Props {
    color?: string
    size?: string
    name?: string
  }
  
  //设置默认值的 父传子
  const props = withDefaults(defineProps<Props>(), {
    color: '#8e9199',
    size: 'small',
    name: 'test',
  })
  
  //计算属性 拼字符串
  const svgSize = computed(() => 'icon-' + props.size)
  </script>
  
  <style lang="scss" scoped>
  .icon {
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  
    &-small {
      width: 1em;
      height: 1em;
    }
  
    &-middle {
      width: 1.5em;
      height: 1.5em;
    }
  
    &-large {
      width: 2em;
      height: 2em;
    }
  }
  </style>
  

全局注册组件

• 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)

使用组件

 <svg-icon name='test' color='blue' size='middle'></svg-icon>

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

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="`#${name}`"  :fill="color"/>
  </svg>
</template>

<script lang="ts" setup>
#name svg名称  color svg填充颜色
defineProps({
  name: String,
  color:String
})
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

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是颜色 
<svg-icon name="data" color="red" />