vue引入iconfont阿里巴巴矢量图标库官网，自定义图标

官网地址：iconfont-阿里巴巴矢量图标库

一、svg icon引入：安装依赖:svg-sprite-loader

npm i svg-sprite-loader -D

二、下载图标，存入src/icons/svg中（新建文件目录）,修改规则和新增规则（vue.config.js）

// resolve定义一个绝对路径获取函数const path = require('path')function resolve(dir) {return path.join(__dirname, dir)}//修改chainWebpack，配置svg规则排除icons目录中svg文件处理// set svg-sprite-loaderconfig.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()

三、图标自动导入（icons/index.js）

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// 注册组件
Vue.component('svg-icon', SvgIcon)
// 批量导入 .svg 文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

四、创建SvgIcon组件（./components/SvgIcon.vue）

<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :href="iconName" /></svg>
</template><script>export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return /^(https?:|mailto:|tel:)/.test(this.iconClass)},iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;
}
</style>

五、使用

<svg-icon icon-class="todo"/>
.svg-icon{padding: 0.02rem;font-size: 22px;color:$main;border-radius: 0.04rem;margin-left: 0.06rem;
}

六、效果

（如果遇到svg图标无法修改颜色情况，在工具中打开svg图标，将“fill”属性的颜色值去掉就可以了，因为svg源文件中得“fill”属性有默认颜色。）

其他引入方式，可参考：自定义element-ui图标 - 简书

vue引入iconfont阿里巴巴矢量图标库官网，自定义图标相关推荐

码神之路博客系统更换个人卡片图标（iconfont 阿里巴巴矢量图标库的使用）
目录个人卡片图标更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中，拿走不谢
登录Iconfont-阿里巴巴矢量图标库官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
使用iconfont阿里巴巴矢量图标库（最方便的使用方法）
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
2017 阿里巴巴矢量图标库导入所选图标到jsp页面步骤
阿里巴巴矢量图标库导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路. 1.需要注册一个github账号: 登陆 ...
stm32封装库官网下载方法 bxl下载
stm32封装库官网实在难找,以前都下载过,现在居然不知道在哪里下载的了,特此记录下载方法以防止忘记. 2019年2月19日 ST已经在官网发布了全系列MCU的原理图符号库和PCB封装库,使用bxl格 ...
加入我们--YKsuit 雅库官网 -男士品牌西服，网上购物中心
加入我们--YKsuit 雅库官网 -男士品牌西服,网上购物中心加入我们--YKsuit 雅库官网 -男士品牌西服,网上购物中心 posted on 2014-01-29 22:25 lexus ...
几个比较好的IT站和开发库官网
几个比较好的IT站和开发库官网 1.IT技术.项目类网站 (1)首推CodeProject,一个国外的IT网站,官网地址为:http://www.codeproject.com,这个网站为程序开发者提 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...

vue引入iconfont阿里巴巴矢量图标库官网，自定义图标

一、svg icon引入：安装依赖:svg-sprite-loader

二、下载图标，存入src/icons/svg中（新建文件目录）,修改规则和新增规则（vue.config.js）

三、图标自动导入（icons/index.js）

四、创建SvgIcon组件（./components/SvgIcon.vue）

五、使用

六、效果

vue引入iconfont阿里巴巴矢量图标库官网，自定义图标相关推荐

最新文章

热门文章