vue项目使用svg

目录

前言

简单使用

复制svg代码

创建vue图标文件

使用组件

动态使用

插件注册 

---

前言

svg在项目中非常常用，那么在vue中如何使用svg呢？

思路来源：我们新创建的项目中会发现components目录下的icons目录下已经有一些案例

说明官方推荐这种写法

我们依葫芦画瓢就可以了。

简单使用

复制svg代码

要说国内最大的svg图标库无疑是阿里矢量图库了，我们随便找一个复制svg源码

创建vue图标文件

在components下的icons目录创建一个vue，假设就叫IconLike.vue，然后将复制的svg代码粘贴进去即可

注： 这个属性表示图标填充颜色，一旦写死，在外部不可改变，我们参考vue提供的案例将其修改为currentColor

这样，外部就能通过css像操控字体颜色那样简单

使用组件

使用：像正常的vue组件那样引入 

显示

修改颜色 

 显示

动态使用

有时候我们仅仅知道的是icon的名称，那怎么显示呢？

使用compoent

该方法需要将图标注册为全局组件

使用component标签

正常显示

插件注册 

我们的项目中svg图标通常是很多的，如果一个一个的在main中注册，既不优雅，也很繁琐，推荐采用插件的方式

创建一个ts文件，下面的文件名称和文件位置只是一个示例，事实上名称和位置皆随意

代码

import { type App } from 'vue';
import Like from "./icons/IconLike.vue";
import IconCommunity from './icons/IconCommunity.vue';
import IconDocumentation from './icons/IconDocumentation.vue';


const allGlobalComponent = { Like, IconCommunity, IconDocumentation };
export default {
    install(app: App) {
        for (const key in allGlobalComponent) {
            if (Object.prototype.hasOwnProperty.call(allGlobalComponent, key)) {
                app.component(key, allGlobalComponent[key as keyof typeof allGlobalComponent]);
            }
        }
    }
}

 在main中注册即可

使用

 显示

完成！