【vue】webpack插件svg-sprite-loader---实现自己的icon组件
引言:最近开始写vue的项目,借鉴了一下vue-element-admin源码,针对vue有一个关于icon图标的处理,最近也找了很多关于vue的icon处理的解决方案,大部分都是按照之前小程序的方式直接引入iconfont项目,然后在外面封装调用样式就可以了。
- 按照平时导入icon的方法的话有一些已知的缺点
- 操作繁琐,每次ui需要加一些新的图标的时候,都要重新下载图标库的项目,然后把整体的文件(其中包括css,svg,ttf,woff等)替换掉。
- 如果更改名称的话,需要在图标库里改一次,然后进行下载复制拷贝。
- iconfont网站库图标内容有限,特殊业务条件需要uimm们自己设计的图(PSD小图标变身SVG Sprites/font-face历险记)
- 文档中推荐的方式是引入svg
使用svg的优点
- 图标易于实时修改
- 图标可以带动画
- 可以使用标砖的prop和默认值来将图标保持在一个典型的尺寸并随时按需改变他们
- 图标是内联的,所以不需要额外的HTTP请求
- 可以动态地使得图标可访问
- 这里准备采用文档中推荐的插件svg-sprite-loader进行介绍
注: 用来根据导入的svg文件自动生成symbol标签并插入html,接下来就可以在模板忠方便地使用svg-sprite技术了
使用svg-sprite的好处
- 页面代码清爽
- 可使用ID随处重复调用
- 每个SVG图标都可以更改大小颜色
安装插件
npm install svg-sprite-loader --save
webpack配置
在webpack.base.conf.js加入处理svg的loader
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
这个配置默认导入src文件下的icons文件
src/icons/index
// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);
然后运行
npm run dev
报错了,此时我们看我们的webpack配置
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: path.resolve(__dirname, '../src/assets/icons')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
下面url-loader中也处理了svg文件,删掉svg处理之后就显示我们需要的svg了,但是之前的url是我们element-ui里生成的,需要加上**symbol**,不去处理src/assets/svgs路径下的svg文件
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: path.resolve(__dirname, '../src/assets/icons')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [
path.resolve(__dirname, '../src/assets/icons'),
],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
注:require.context,webpack管理依赖
使用方法
<svg>
<use xlink:href="#jisuan" />
</svg>
import '@/assets/icons/jisuan.svg'
组件化
当然,这并不是最后想要的结果,我们需要将每个svg文件整合起来组件化,这样方便以后的调用
建立一个Icon.vue文件
<template>
<svg>
<use :xlink:href="`#${name}`"></use>
</svg>
</template>
<script>
export default {
name: 'icon',
props: {
name: {
type: String,
required: true,
},
},
}
</script>
<icon name="jisuan" />
import '@/assets/icons/jisuan.svg'
自动导入
这里插入每个svg图标都需要import,在我们平时写项目的时候js,vue文件都已经实现了自动导入,这里照葫芦画瓢,让src/assets/svg里的文件自动导入
assets/icon/scan.js
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);
main.js
import './assets/scan.js'
参考文档:
【vue】webpack插件svg-sprite-loader---实现自己的icon组件的更多相关文章
- 在vue中使用svg sprite
概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...
- SVG Sprite 使用Symbol元素制作ICON
介绍 SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法.之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方 ...
- vue 常用插件,保存
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...
- 转 webpack 插件 svg-sprite-loader
最近开始看 Vue 了,首先用官方的模版把项目快速搭建起来: Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- vue常用插件汇总
UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...
- 从0开始搭建vue+webpack脚手架(四)
之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...
随机推荐
- day 49 数据分析, 数据聚合 F 查询 Q 查询
6.聚合查询和分组查询 1.聚合查询aggregate 我们先通过一个例子来感受一下吧. 1 2 3 # 计算所有图书的平均价格 books = models.Book.objects.aggrega ...
- 初始化css文件
首先我们需要了解一下为什么需要公共样式(公共样式是为了初始化某些标签的默认值): 1. 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差 ...
- 剑指offer五十一之构建乘积数组
一.题目 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...
- javac的泛型
?:在实例化对象的时候,不确定泛型参数的具体类型时,可以使用通配符进行对象定义. (1)?表示通配符,通配符 与 T 的区别 T:作用于模板上,用于将数据类型进行参数化,不能用于实例化对象. publ ...
- sql 保留两位小数
select convert(decimal(18,2),1800.2669)
- C#的Equals不区分大小写
代码:System.Windows.Forms.MessageBox.Show("abc".Equals("ABC", StringComparison.Inv ...
- 面试题28:单链表一次遍历删除从后往前的第n个节点
class Solution { public: ListNode *removeNthFromEnd(ListNode *head, int n) { ListNode* fake = ); fak ...
- 开例外!微信小程序登录绕过CAS单点登录(SSO)认证检查
1 为了让微信API能够绕过CAS认证检查,将微信api入口部分设计为独立的模块.放入controller目录下,命名为wechat.java文件为WechatController.java 文件大体 ...
- Object类上的方法
1.getClass: public final native Class<?> getClass(); 返回当前对象运行时的类的对象. 2.hashCode: public native ...
- CentOS探索之路2---使用rpm安装JDK
使用rpm安装jdk 在前一Linux探索文章中http://www.cnblogs.com/Kidezyq/p/8782728.html,有关于通过yum指令安装原生OpenJDK的命令.当时有 ...