前置

有的时候，我们经常在业务中会需要使用字体图标的场景，比如同一个图标在不同的地方显示不同的颜色，这个时候我们使用字体图标就非常的合适，

这篇文章我们主要讲的是在Vue中显示的字体图标`svg-icon`的使用 # 开始啦！第一步：下载相应的**包**或者**插件**（会提示没有安装xml-loader,只需要安装下xml-loader，重启下项目就可以解决报错）

## 使用npm
npm install vue-svg-icon xml-loader -D
## 使用yarn
yarn add vue-svg-icon xml-loader

第二步：把从iconfont下载的.svg的文件

第三步：在icon的Vue组件中写代码 ../src/components/svgIcon/index.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 :xlink:href="iconName" /></svg>
</template><script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return isExternal(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的文件夹外部，创建一个index.js文件
如下
代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)
// 在./svg下查找 “.svg”文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第四步：在main.js中引入icon/index.js文件中全局设置

//全局加载就可以了
import '@/icons/index.js'

第五步：直接在Vue组件中使用即可，直接使用文件名就可以了。

<div><svg-icon icon-class="language" />
</div>

效果图

结尾

svg-icon是前端经常使用的，必须要会使用。好了今天的博客就到这了，拜拜！

一文带你搞定svg-icon的使用相关推荐

【RabbitMQ】一文带你搞定RabbitMQ延迟队列
本文口味:鱼香肉丝预计阅读:10分钟 0|1一.说明在上一篇中,介绍了RabbitMQ中的死信队列是什么,何时使用以及如何使用RabbitMQ的死信队列.相信通过上一篇的学习,对于死信队列已经 ...
干货 | 一文带你搞定Python 数据可视化
2019独角兽企业重金招聘Python工程师标准>>> 01前言在之前的一篇文章<Python 数据可视化利器>中,我写了 Bokeh.pyecharts 的用法,但是 ...
阿里、京东、字节跳动春招，Java岗offer不好拿？一文带你搞定
前言以下内容均为二月面试真题整理,面试内容均来自阿里.京东.腾讯.字节跳动等一线大厂,由网友集合反馈整理! 如有雷同,请在评论区提醒,全部内容GitHub可查阅. 由于篇幅原因,内容会比较杂乱,程序 ...
C语言学习：编程、源文件、源代码是什么？一文带你搞定它！
编程:人通过某种方式命令计算机做一些动作,来得到人想要的结果,就叫编程. 比如开关灯,把灯看做计算机,按下按钮,灯就开了,松开按钮灯就关了,这样也就达到了人向计算机下达指令的需求. 在早期,计算机全是 ...
一文带你搞定抖音最近最火的情侣微信早报信息推送
文章目录一.引言二.公众号配置 2.1 注册号申请 2.2 填写appID和appsecret 2.3 配置推送模板 2.4 扫码关注三.API配置 3.1 账号申请 3.2 创建应用 3.3 ...
一文带你搞定线程池原理
1.使用线程池的意义何在? 项目开发中,为了统一管理线程,并有效精准地进行排错,我们经常要求项目人员统一使用线程池去创建线程.因为我们是在受不了有些人动不动就去创建一个线程,使用的多了以后,一旦报错就 ...
DDD进阶_一文带你搞定什么是前台、中台、后台
DDD从入门到精通,系列文章传送地址,请点击本链接. 目录一.中台和平台的关系二.什么是中台? 三.数字化转型中台应该共享什么? 四.如何实现前中后台的协同? 1. 前台 2. 中台 3. 后台 ...
一文带你搞定JDBC
前言:"只有自己强大,才不会被别人践踏." 你好,我是梦阳辰,让我们轻松玩编程,一起走进JDBC的世界吧!文章较长建议收藏再看! 文章目录 1.JDBC概述 2.JDBC编程六步( ...
并联谐振电路工作原理详解，案例+计算公式，几分钟带你搞定
昨天给大家分享了关于串联谐振的文章,今天给大家分享关于并联谐振的文章.(私信我的那个朋友,记得准备来看) 错过了串联谐振的朋友,可以直接点击下方标题跳转. 串联谐振是怎么工作的?案例+公式,几分钟,一 ...

一文带你搞定svg-icon的使用

前置

结尾

一文带你搞定svg-icon的使用相关推荐

最新文章

热门文章