vue3项目svg使用

1.下载SVG图片

在icon font官网选择想要得图片下载https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2，下载成SVG格式。将图片放至 src/assets/icons 文件夹下，如fanhui.svg。

2.写组件

在src/components中新建组件 SvgIcon/index.vue

<script setup name="SvgIcon">
import { Icon } from '@iconify/vue'

const props = defineProps({
    name: {
        type: String,
        required: true
    },
    flip: {
        type: String,
        validator(value) {
            return ['', 'horizontal', 'vertical', 'both'].includes(value)
        },
        default: ''
    },
    rotate: {
        type: Number,
        validator(value) {
            return value >= 0 && value <= 360
        },
        default: 0
    }
})

const transformStyle = computed(() => {
    let style = []
    if (props.flip != '') {
        switch (props.flip) {
            case 'horizontal':
                style.push('rotateY(180deg)')
                break
            case 'vertical':
                style.push('rotateX(180deg)')
                break
            case 'both':
                style.push('rotateX(180deg)')
                style.push('rotateY(180deg)')
                break
        }
    }
    if (props.rotate != 0) {
        style.push(`rotate(${props.rotate}deg)`)
    }
    return `transform: ${style.join(' ')};fill:currentColor;overflow:hidden`
})
</script>

<template>
    <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
    <svg v-else :style="transformStyle" aria-hidden="true">
        <use :xlink:href="`#icon-${name}`" />
    </svg>
</template>

3.页面内使用

在使用该图片的地方使用如下代码，name属性为保存的svg图片的名字

<el-icon>
    <svg-icon name="fanhui" />
</el-icon>