vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件

一、在components路径下创建IconSvg文件夹

并在IconSvg下创建IconSvg.vue文件、index.js文件

Iconsvg.vue文件代码

<template><div><span class="iconfont" :class="iconTag"></span><slot></slot></div>
</template><script>export default {name: "IconSvg",props: {name: {type: String,required: true}},computed: {iconTag() {return `${this.name}`;}}}
</script><style scoped>.iconfont {font-family: "iconfont" !important;font-size: 2em;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
</style>

index.js文件代码

import IconSvg from './IconSvg'// 添加install方法
IconSvg.install = function(Vue) {Vue.component(IconSvg.name, IconSvg);
};export default IconSvg;

二、在main.js文件里面全局引入IconSvg组件

import IconSvg from './components/IconSvg'
Vue.use(IconSvg);

三、在public/index.html文件中引入阿里巴巴项目链接

  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/XXXXXX.css">

其中的href链接是从阿里巴巴矢量库中生成的链接，在我的项目中，找到要使用的项目icon库，复制Symbol方式的即可

四、在组件中使用icon

   <icon-svg name="iconmingshihuicui" class="nav-icon"/>.nav-icon{color: #5dd5c8;font-size: 10px;}

直接在要使用icon的vue文件中使用即可，在这里请注意，当前的图标icon是被当做字体样式来的，所以想要更改图标的大小（font-size）颜色(color)，要使用对应的字体样式修改。
其次，icon-svg组件中的name名称是图标对应的名称

vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件相关推荐

全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
码神之路博客系统更换个人卡片图标（iconfont 阿里巴巴矢量图标库的使用）
目录个人卡片图标更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
使用iconfont阿里巴巴矢量图标库（最方便的使用方法）
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
阿里巴巴矢量库的用法
阿里巴巴矢量库的用法: 1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下 2.Unicode 使用步骤如下: 第一步:拷贝项目下面生成的 @font-face ...

vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件

一、在components路径下创建IconSvg文件夹

Iconsvg.vue文件代码

index.js文件代码

二、在main.js文件里面全局引入IconSvg组件

三、在public/index.html文件中引入阿里巴巴项目链接

四、在组件中使用icon

vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件相关推荐

最新文章

热门文章