Vite_Vue3.0 处理 SVG

介绍

处理

一、封装 SVG 组件

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="svgHref" />
    </svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'IconSvg',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        name: {
            type: String,
            required: true,
        },
        class: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        const svgClass = computed(() => {
            if (props.class) {
                return `svg-icon ${props.class}`;
            }
            return `svg-icon`;
        });
        const svgHref = computed(() => `#${props.prefix}-${props.name}`);
        return { svgHref, svgClass };
    },
});
</script>
<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    stroke: currentColor;
    overflow: hidden;
}
</style>

二、修改 vite.config.ts 配置

安装vite-plugin-svg-icons
```
yarn add vite-plugin-svg-icons -D
```

配置vite.config.ts配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import path from 'path';
import viteSvgIcons from 'vite-plugin-svg-icons';
export default ({ mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            vueJsx(),
            viteSvgIcons({
                iconDirs: [path.resolve(process.cwd(), 'src/assets/iconSvg')],
                symbolId: 'icon-[dir]-[name]',
            }),
        ],
    });
};

配置main.ts , 全局注册SVG组件

import Vue from 'vue';
import App from '@/App.vue';
import 'virtual:svg-icons-register';
……

修改SVG文件，配置SVG属性（用于自定义SVG颜色）: 去除之前存在的 fill 属性即可

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" d="M512 170.666667a341.333333 341.333333 0 1 0 0 682.666666 341.333333 341.333333 0 0 0 0-682.666666zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z m426.666667-213.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v128h128a42.666667 42.666667 0 1 1 0 85.333334h-128v128a42.666667 42.666667 0 1 1-85.333334 0v-128H341.333333a42.666667 42.666667 0 1 1 0-85.333334h128V341.333333a42.666667 42.666667 0 0 1 42.666667-42.666666z" /></svg>

如图所示, 去除 fill 属性

SVG组件日常使用

<template>
<a-form-item>
    <Svg name="circle-remove" class="icon remove" />
    <Svg name="circle-arrow-up" class="icon up" />
    <Svg name="circle-arrow-down" class="icon down" />
    <Svg name="circle-add" class="icon add" />
    <Svg name="circle-add" class="icon add" color="#29cccc"/>
</a-form-item>
</template>

<style>
.icon {
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
}
.remove {
    color: #d32323;
    margin-right: 11px;
}
.up {
    color: #8d8f99;
    margin-right: 11px;
}
.down {
    color: #8d8f99;
    margin-right: 11px;
}
.add {
    color: #29cccc;
}
</style>

介绍​

处理​

一、封装 SVG 组件​

二、修改 vite.config.ts 配置​

介绍

处理

一、封装 SVG 组件

二、修改 vite.config.ts 配置