vue3 编写 svg 通用组件 修改颜色和尺寸

vite-plugin-svg-icons

vite-plugin-svg-icons 文档

下载

pnpm add vite-plugin-svg-icons -D

配置

vite.config.ts

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

plugins: [
    DefineOptions(),
    createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹(路径为存放所有svg图标的文件夹不单个svg图标)
        iconDirs: [path.resolve(process.cwd(), "src/assets")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
    }),
],

src/main.ts

import 'virtual:svg-icons-register'

编写通用组件

src/components/svgIcons/index.vue

<template>
    <svg aria-hidden="true" :style="styles">
        <use :xlink:href="iconName" :fill="color" />
    </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    iconClass: {
        type: String,
        required: true,
    },
    color: {
        type: String,
        default: "#08bebe",
    },
    width: {
        type: String,
        default: "20px",
    },
    height: {
        type: String,
        default: "20px",
    },
});

const styles = computed(() => {
    return `width: ${props.width}; height:${props.height}`;
});

const iconName = computed(() => {
    return `#icon-${props.iconClass}`;
});
</script>

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}

使用

svg存放的地址
如果是文件夹以 - 拼接
例1：src/assets/mask_star.svg
例2：src/assets/mine/mask_star.svg

引入组件

例1：icon-class="mask_star"
例2：icon-class="mine-mask_star"
<SvgIcons width="99px" height="99px" color="#ffffff" icon-class="mine-mask_star" />

svg 颜色修改不生效

打开 svg 文件把带有颜色的 fill=“#cccccc” 值取消 改为 fill=“”