【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不同的配置文件 ...
随机推荐
- 解决onclick事件的300ms延时问题
首先是资源的下载:fastclick.js 作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好,对于写文章方面确实是望尘莫及啊,所以想详细了解原理的朋友直接去大牛 ...
- 解决git commit 遇到datached HEAD问题
git detached HEAD 你可以认为 HEAD(大写)是”current branch”(当下的分支).当你用git checkout切换分支的时候,HEAD 修订版本重新指向新的分支. 有 ...
- easyUI制作slider小滑块,可拖动和精确输入
借助easyUI制作.完善slider小滑块. 可拖动.和在右边输入框精确输入 效果图: html代码: <div class="text_fl" >亮度设置:< ...
- centos 7 nginx 安装
1.下载nginx rpm包 下载地址:http://nginx.org/packages/mainline/centos/7/x86_64/RPMS/ ,可查看所有安装包 从中如下载: wget h ...
- tensorflow基础篇-1
1.使用占位符和变量 import tensorflow as tf import numpy as np #-----创建变量并初始化----------- def first(): my_var= ...
- 编译Qt-mingw使用的opencv
set path=D:\dev\IDE\Qt5.7.0\Tools\mingw530_32\bin;%path% cd build_mingw530_32 cmake -G "MinGW M ...
- 【Java并发编程】:线程中断
使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返回.这 ...
- rabbitmq实现一台服务器同时给指定部分的consumer发送消息(tp框架)(第六篇)
previous article: http://www.cnblogs.com/spicy/p/7989717.html 上一篇学习了,发送消息的时候用direct类型的exchange,绑定不同 ...
- android Butter Knife 使用详解
Butter Knife github连接:https://github.com/JakeWharton/butterknife 本文使用的butterknife版本7.0.1 butterknife ...
- SPSS学习系列之SPSS Modeler怎么修改默认的内存大小(图文详解)
不多说,直接上干货! 问题来源: 如果你的电脑内存配置比较低的话,会随着数据量增加(尤其是大数据),带不起的情况很有可能发生,会出现一些内存报错... ... 解决办法: 打开“工具”,在modele ...