一文带你搞定svg-icon的使用方式
作者:小白在线学前端
这篇文章主要介绍了一文带你搞定svg-icon的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
svg-icon的使用方式
前置
有的时候,我们经常在业务中会需要使用字体图标的场景,比如同一个图标在不同的地方显示不同的颜色,这个时候我们使用字体图标就非常的合适,
这篇文章我们主要讲的是在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" rel="external nofollow" /> </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是前端经常使用的,必须要会使用。
icon图标在线生成教程(svg转icon)
1、准备好项目的Svg文件
2、访问在线生成工具,网址:https://icomoon.io
3、其余操作步骤按照如下截图
(1)点击右上角“icoMoon App”按钮
(2)点击按钮导入svg文件
(3)查看使用方法
(4)定义下载文件名称和相关配置
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。