Vue中使用SVG图标的步骤【钢镚核恒】

Vue中使用SVG图标的步骤

简介

svg 可缩放矢量图形（Scalable Vector Graphics）

svg 优势：任意缩放，超强显示效果，较小文件，可压缩

svgo 用来压缩svg中无用信息

svg-sprite-loader 将加载的 svg 图片拼接成雪碧图，在其他地方通过引用

在了解这些概念后，就上路吧！这里概念排很少，大家可以到其他地方扩充知识~

上路

添加依赖
```
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0"
```
方法一：复制到 package.json，执行 npm i

方法二：直接安装npm i svg-sprite-loader svgo --save-dev

添加 svg 组件（创建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 :href="iconName" /></svg>
</template><script>
// 使用SvgIcon的文档: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usageexport default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {// 过滤网络链接，如果不是网络的资源会走向本地的svgreturn /^(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组件（创建assets/icons/index.js）

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// 注册全局使用， 组件名是 <svg-icon>
Vue.component('svg-icon', SvgIcon)// 使用的svg存放路径 ./svg
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

使用svgo压缩（创建assets/icons/svgo.yml）

# replace default config# multipass: true
# full: trueplugins:# - name## or:# - name: false# - name: true## or:# - name:#     param1: 1#     param2: 2- removeAttrs:attrs:- 'fill'- 'fill-rule'

在vue.config.js配置

module.exports = {chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

使用svg（注意：图片放到assets/icons/svg下）

 <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

Vue中使用SVG图标的步骤【钢镚核恒】相关推荐

Vue中设置404错误页面【钢镚核恒】
Vue错误页面简介错误页面:为了让用户在访问不到的情况下,有更好的体验和反馈这里提供了使用步骤,上路! 有404.401组件模板,大家可以修改使用,或者自己动手造个更好的咯上路创建错误页面组 ...
Vue 初始化样式之 normalize.css【钢镚核恒】
Vue 初始化样式之 normalize.css 简介 normalize.css 的作用是初始化样式,例如: * {margin: 0;padding: 0;border: 0; } 在vue中使用 ...
Spring MVC【钢镚核恒】
Spring MVC 简介 Spring MVC是Spring体系的轻量级Web MVC框架 Spring MVC的核心Controller控制器,用于处理请求,产生响应 Spring MVC基于Sp ...
Spring 【钢镚核恒】
Spring 简介 Spring框架是企业开发复杂性的一站式解决方案 Spring框架的核心是loC容器与AOP面向切面编程 Spring loC负责创建与管理系统对象,并在此基础上扩展功能使用导 ...
Java 算法之 “删除链表中倒数第k个节点”【钢镚核恒】
删除链表中倒数第k个节点简介题目描述:给定⼀个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点[Leetcode] 链表中倒数第k个节点 , 和这篇文章使用的方法一致,就是变成找到倒数k+ ...
Java 探究集合List、Map、Set底层的数据结构【钢镚核恒】
Java 集合简介集合 (collection)是存储对象的容器.例如:6个人一个团队(集合) 集合与数组类通,数组是存储具体数据的容器.集合的底层有用到数组这篇文章是加深对集合的理解,探究各种 ...
Java 面向对象【钢镚核恒】
Java 面向对象简介类和对象类是模子,确定对象将会拥有的特征(属性)和行为(方法) 对象是类的实例表现类是对象的类型对象是特定类型的数据类,抽象的概念-模板对象,-个看得到.摸得着的具 ...
Java 原始的JDBC方式连接MySQL数据库【钢镚核恒】
Java JDBC 简介 JDBC(Java DataBase Connectivity,Java数据库连接) JDBC 可让Java通过程序操作关系型数据库 JDBC 基于驱动程序实现与数据库的连接 ...
Java 简介之JVM、JDK、JRE【钢镚核恒】
Java 简介 Java是一门面向对象的程序设计语言 1995年由sun公司发布 2010年sun公司被Oracle公司收购 JVM JVM(Java Virtual Machine),Java虚拟机 ...

Vue中使用SVG图标的步骤【钢镚核恒】

Vue中使用SVG图标的步骤

简介

上路

Vue中使用SVG图标的步骤【钢镚核恒】相关推荐

最新文章

热门文章