动态改变 svg 颜色

环境：vite+vue3

需求背景:svg图片在两个站点共用一套代码，但不同主题颜色不同

1. 根据站点不同主题颜色，动态把svg打包成不同的颜色
2. svg图标默认展示颜色一样，根据站点不同主题颜色，但hover或者点击时，颜色不同

思路：通过vite的raw资源导入方式，获取svg原图的内容，然后动态修改svg中的色值，直接渲染到在html页面中

组件:SvgWrapper

<template>
  <span class="svg-wrapper" v-html="contentCopy"></span>
</template>
<script>
export default {
  name: 'SvgWrapper',
  props: {
    //尽量保证svg文件中,有viewBox属性
    content: {
      type: String,
      default: '',
    },
    isActive: {
      type: Boolean,
      default: false,
    },
    fillColor: {
      type: Object,
      default: () => ({
        // 注释： env_key:[svgColor,activeColor];
        // svgOfColors: ['#878FA2'],
        // web1: ['#f37327'],
        // web2: ['#1890ff'],
      }),
    },
  },
  setup(props) {
    // 根据环境---配置状态 ,
    //色值用数组储存，是因为svg中可能有多种色值
    const defaultSetting = {
      svgOfColors: ['#878FA2'],
      web1: ['#f37327'],
      web2: ['#1f78ff'],
      //合并用户配置的颜色配置，只需传需要修改的项即可
      ...props.fillColor,
    }
    const svgOfColors   = defaultSetting.svgOfColors   
    /// VITE_PROFILE 是全局的环境变量 
    const currentWebOfColors = defaultSetting[VITE_PROFILE || 'web1']
    const contentCopy = computed(() => {
      if (props.isActive) {
        let res = props.content
        svgOfColors.forEach((item, key) => {
          res = res.replaceAll(item, currentWebOfColors[key])
        })
        return res
      } else {
        //否则,显示原图
        return props.content
      }
    })
    return { contentCopy }
  },
}
</script>

使用

注意：获取svg原图内容时，需要使用vite的静态资源加载方式——raw。

<script>
import iconUrlSvgRaw from '@/assets/images/svg.svg?raw'
export default {
  setup(props) {
  const isActive=ref(false)
  function changeColor(){
  isActive.value=!isActive.value
  }
    return {
      isActive,
      changeColor,
      iconUrlSvgRaw 
    }
  },
}
</script>
<template>
    <div @click='changeColor'>
    <SvgWrapper
      :content="iconUrlSvgRaw"
      :fillColor="{
        svgOfColors: ['#FFB284', '#F37327'],
        web1: ['#FFB284', '#F37327'],
        web2: ['#7fa5e0', '#1f78ff'],
      }"
      :isActive="isActive"
    />
</template>