SVG 静态文件使用 ,以及如何简单修改SVG 常见样式(填充颜色、描边等)。

简介：简单封装 SVG 组件，在页面通过该组件展示SVG 图形，避免SVG内容过多，导致页面不美观，同时简单修改svg 样式，提供 hover 、点击等方法对SVG样式修改思路。

插件仅使用于 vite 项目，但后面对于样式的修改都可以参考。

一、安装插件

// npm
npm install vite-plugin-svg-icons --save
// yarn
yarn add vite-plugin-svg-icons

二、vite.config.ts 配置

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


vue 中：
plugins:[
      // 添加下面配置
      createSvgIconsPlugin({
      iconDirs: [ 
      // 配置 SVG 图标的目录
      _resolve("src/assets/svg")],
       // 定义每个 SVG 图标的符号 ID
      symbolId: "icon-[name]"
    }),
]

react 中：
plugins: [
        // 添加下面配置
        createSvgIconsPlugin({
            // 配置 SVG 图标的目录
            iconDirs: [resolve('src/assets/svg') ],
            // 定义每个 SVG 图标的符号 ID
            symbolId: 'icon-[name]'
        })
],

三、min.ts 或者 App.tsx 全局注入脚本

// 找一个全局生效的地方引入即可，无太大要求
import "virtual:svg-icons-register";

四、VUE 封装

<template>
  <!-- svg 渲染本地SVG的静态资源 -->
  <svg :width="size" :height="size"  :class="` ${className}` ">
    <use :xlink:href="`#icon-${name}`" ></use>
  </svg>
</template>
<script setup lang="ts">
import { computed } from "vue";
const props=defineProps({
  // SVG 文件名称
  name:{
    type:String,
    required:true,
  },
  // 额外类名
  className:{
    type:String,
    default:"",
  },
  // SVG 大小
  size:{
    type:Number,
    default:50,
  }

})
</script>
<style scoped lang="less">

</style>

五、React 封装

type SvgIconProps={
    name:string,         // 本地SVG文件名称
    className?:string    // 额外类名 
    size?:number         // 图标大小
}
const SvgIcon = (props:SvgIconProps) => {
    return (
        <svg width={props?.size||50} height={props?.size||50}  className={props?.className} >
            <use xlinkHref={`#icon-${props?.name}`} ></use>
        </svg>
    );
};

export default SvgIcon;

六、SVG 样式修改思路

svg 样式属性中介绍：

fill：图形填充颜色

stroke：图形描边颜色

stroke-width：图形描边宽度

stroke-linejoin：描边线的类型

width：图形宽度

height：图形高度

一般来说 SVG 的样式类型很容易修改，直接传递参数到分组的组件并赋值给 SVG 即可。

例如以下参考：

而对于 fill 填充颜色来说修改，SVG是一种XML格式的文件，其中的属性具有命名空间，修改SVG图形元素的填充颜色，需要在填充颜色的具体图形元素上设置，及修改 SVG 文件中的 fill 属性，这样和我们预期的外部传递填充颜色不符合。但是可以通过下面的方法来实现。

fill属性：currentColor

currentColor是一个特殊的CSS值，它表示当前元素的文本颜色。我们让其SVG 的元素填充颜色去继承文本的颜色，通过改变文本的颜色达到修改 SVG 填充颜色的效果。

在对应的 SVG 文件中，修改需要更改颜色的 fill 属性值为 currentColor 即可，文件中 fill 值为 none 的可以不用修改。

例如：

svg 中

path、ellipse、rect、circle、line、polygon 等绘图元素中单独赋值

只要设置了 fill属性为currentColor 的图形区域，则其父文本颜色修改，SVG 填充颜色也会自动修改。

效果预览：

小结：

1.配置 SVG 图标的目录之后，请尽量保持所有的SVG都在这个目录文件夹中。

2.stroke 也可以配置 currentColor 属性。

3. 需要通过hover 或者点击事件来修改 SVG 填充颜色时，给指定的SVG 文件的 fill 配置为 currentColor，然后直接给SVG 赋值或者给其父元素赋值 color 颜色即可。

4.全局导入 import "virtual:svg-icons-register"; 不需要额外下载， vite-plugin-svg-icons 按照好就好了。

最后，做好眼前的事，才能迎来花开，愿美好每一天！