vue3+js+vite学习之使用svg图标，并且支持svg图标渐变色

使用vite-plugin-svg-icons

1、安装vite-plugin-svg-icons

npm install vite-plugin-svg-icons
或者
yarn add vite-plugin-svg-icons

2、在vite.config.js中进行配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default ({ mode }) => {
  const base = '/'
  return defineConfig({
    base,
    plugins: [
      vue(),
      createSvgIconsPlugin({
        // 指定要缓存的图标文件夹（将所有svg都放在一个文件夹下）
        iconDirs: [path.resolve(process.cwd(), 'public/icons')],
        // 执行icon name的格式（dir代表文件夹名称，name代表icon名称）
        symbolId: 'icon-[dir]-[name]'
      })
    ]
  })
}
 

3、组件封装（支持渐变色）

在src/components文件夹下新建SvgIcon文件夹，然后在SvgIcon文件夹下新建index.vue文件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <defs>
      <linearGradient :id="`gradient-${randomNum}`" v-bind="direction">
        <stop :stop-color="props.color" />
        <stop offset="1" :stop-color="props.gradientColor" />
      </linearGradient>
    </defs>
    <use :xlink:href="iconName" :fill="svgFill" />
  </svg>
</template>
<script setup>
import { computed } from 'vue'
let randomNum = Math.random();

const props = defineProps({
  // 图标名称
  name: {
    type: String,
    required: true
  },
  // 单一颜色
  color: {
    type: String,
    default: ''
  },
  // 渐变色
  gradientColor: {
    type: String,
    default: ''
  },
  // 渐变色角度
  gradientAngle: {
    type: String,
    default: '1'
  }
})
// svg的外层div的class
const svgClass = computed(() => {
  if (props.name) {
    return `svg-icon icon-${props.name}`
  } else {
    return 'svg-icon'
  }
})
// svg图标的名称
const iconName = computed(() => {
  return `#icon-${props.name}`
})
// svg填充颜色，如果gradientColor值存在，就是渐变色，否则是单一颜色
const svgFill = computed(() => {
  if (props.gradientColor) {
    return `url(#gradient-${randomNum})`
  }
  return props.color
})
// 渐变色方向
const direction = computed(() => {
  switch (props.gradientAngle) {
    case '1':
      return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
    case '2':
      return { x1: '0%', x2: '100%', y1: '100%', y2: '0%' }
    case '3':
      return { x1: '0%', x2: '0%', y1: '100%', y2: '0%' }
    case '4':
      return { x1: '100%', x2: '0%', y1: '100%', y2: '0%' }
    case '5':
      return { x1: '100%', x2: '0%', y1: '0%', y2: '0%' }
    case '6':
      return { x1: '0%', x2: '100%', y1: '0%', y2: '100%' }
    case '7':
      return { x1: '0%', x2: '0%', y1: '0%', y2: '100%' }
    case '8':
      return { x1: '100%', x2: '0%', y1: '0%', y2: '100%' }
    default:
      return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
  }
})
</script>

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

4、在main.js中注册

// 引入注册脚本
import 'virtual:svg-icons-register'
// 引入组件
import SvgIcon from '@/components/SvgIcon/index.vue'
// 全局组件挂载
app.component('SvgIcon', SvgIcon)

5、使用

<template>
  <svg-icon name="icon-home" color="#f00"/>
  <svg-icon name="icon-back" color="#f00" gradientColor="#0f0" gradientAngle="8" />
</template>