vue使用svg

网络上有很多教程，但是我还是搜索了很多地方，走了一些坑，不确定一定会帮助大家，但应该可以给大家一些参考，所有代码都自己测试通过，如果不能用，可能是我少写了一些东西，大家可以在评论区指出
新手，希望与大家一起成长，轻喷，谢谢！

svg简介

1.啥是SVG

Scalable Vector Graphics,指可伸缩矢量图形.
SVG 使用 XML 格式定义图形

2.为什么使用svg

1. 不失真
2. 可以方便地修改颜色，实现不同状态的切换
3. 其DOM结构，可以被js较好的控制

优缺点随便写的，别太当真啊

3.缺点

1. 不能表示复杂图形
2. 在Vue中使用相对复杂
3. 不能与HTML兼容
4. 浏览器兼容问题IE8及Android2.3浏览器不兼容（我觉得这是优点）

vue使用svg

1.新建svg一个组件-用于渲染svg

我的脚本存放目录 ./src/components/SvgIcon.vue

至于props变量为什么叫iconClass我也不知道，网上都是这么写的，反正我用起来觉得怪怪的，当然可以自己改一个名字

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props: {
        iconClass: {
            type: String,
            required: true
        },
        className: {
            type: String,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`
        },
        svgClass() {
            if (this.className) {
                return 'svg-icon ' + this.className
            } else {
                return 'svg-icon'
            }
        }
    }
}
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

2.新建一个文件夹用于存放svg

目录 ./src/icons/svg/
可以包含子目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NJwagpE-1624860063998)(md_img/2021-06-28-13-49-33.png)]
注意一下最下边的index.js,用来读取所有svg文件的

3.新建一个index.js用于读取svg

import Vue from 'vue'
import SvgIcon from '../components/custom/SvgIcon.vue'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

//第一个参数是要遍历的目录，第二个参数指定是否遍历子目录，网络上其它地方一般都是false
const req = require.context('./svg', true, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.配置webpack读取规则

在vue.config.js中添加webpack的规则，如果没有这个文件则创建一个放在项目的根目录，因为不同人的配置文件不同，所以这里只放部分代码,以表示配置在什么地方

module.exports = {
 chainWebpack: config => {
        // 添加别名（src默认为@，不用再次添加）
        config.resolve.alias
            .set('@pub', resolve('public')) // 设置public别名为@pub

        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    },
}

5.在main.js文件中

import './icons'//放index.js的文件夹

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

6.使用svg

<template>
    <div class="left">
        <svg-icon class="svg-pic" icon-class="项目"></svg-icon>
    </div>
</template>

<script>
export default {
    name: "ToolBar",
    data(){
        return {
        }
    }
}
</script>

<style scoped>
.svg-pic{
    color:red
}
</style>

1. icon-class直接写svg的名称即可
2. 通过css可以修改颜色
3. 在iconfont上下载的多数svg文件都可以使用

参考网站

【1】Vue中使用svg
【2】实现Vue 中可编辑的 SVG Icon 组件
【3】svg-sprite-loader 在cli3中vue.config.js 中的配置
【4】vue中封装svg-icon组件并使用