最近在写后台管理系统，设计给出的图标是从阿里巴巴矢量图标官网上找的，因此需要引入图标。

效果图：

阿里巴巴矢量图标库页面：

大神实现symbol类型的阿里图标组件的方法：https://blog.csdn.net/weixin_50586667/article/details/118354326

symbol类型的阿里图标使用步骤

1.下载js文件，到本地

2.将下载好的js放到static文件中，静态文件不需要编译，并在index.html文件中引入

3.封装阿里图标组件

<template><svg class="icon" aria-hidden="true"><use :xlink:href="'#'+iconClass"></use></svg>
</template><script>
export default {name: "SvgIcon",props: {iconClass: {required: true,type:String,},},
};
</script><style lang="scss" scoped>
</style>

因为是可以全局使用，因此可以将组件放置到src/components文件夹中。

4.挂载到全局，在main.js文件中注册全局组件

注意：注册全局组件时，Vue.component('名字',组件),此处的名字对应组件注册中的name。也可以指定一个别名。

5.使用组件，iconClass对应阿里图标官网中的每个图标字段

6.修改图标组件的大小

完成！！！

阿里巴巴矢量图标库的引入——symbol类型的使用——阿里图标组件封装相关推荐

矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
iconfont-阿里巴巴矢量图标库使用js方式更更改不了图标颜色解决方法
给使用的ioc组件加个类名,然后在类名样式里加 fill:red(想要的样式)
小程序图标库----之用css画对号和icon图标
/*画√ *//* .test2 {display: inline-block;width: 6px;height: 3px;background:#fff;line-height: 0;font-s ...
flutter显示图标_flutter 引入第三方 Icon 图标（以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
html使用阿里图标库（iconfont）制作字体图标
话不多说,先看一下效果图: 一.通过阿里图标库生成iconfont.css 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2. ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
iconfont阿里巴巴矢量图标库的使用
1.图标资源下载 (1)登录阿里巴巴矢量图标库 (2)选择要使用的图标添加到项目 (3)点击下载到本地 2.在项目中引入 (1)将压缩包解压后加入项目指定目录下 (2)在main.js中引入 impo ...

阿里巴巴矢量图标库的引入——symbol类型的使用——阿里图标组件封装