在vue-cli3中优雅的使用 icon
- 首先我们得有图标
- 这里我们从网上下载svg文件或者UI给你导出svg文件
- 我们在src 文件下新建一个放置svg 文件 的文件夹 @/src/icons.将所有 icon 放在这个文件夹下。
- 创建 icon-component 组件
<template>
<svg
:class="svgClass"
aria-hidden="true"
:color="svgColor"
>
<use :xlink:href="iconName" />
</svg>
</template> <script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'; @Component({ components: {} })
export default class SvgIcon extends Vue {
@Prop({ default: null, type: String })
iconClass!: String; @Prop({ default: '', type: String })
className!: String; @Prop({ default: null, type: String })
svgColor!: String; get iconName() {
return `#icon-${this.iconClass}`;
} get svgClass() {
if (this.className) return `svg-icon ${this.className}`;
return 'svg-icon';
}
}
</script> <style scoped>
.svg-icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 在icons 文件夹放一个index.js 这个js 的作用是引入 icon组件并全局注册 并实现 自动引入
@/src/icons
下面所有的图标了- 之后我们就要使用到 webpack 的 require.context。很多人对于
require.context
可能比较陌生,直白的解释就是- require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹(不包含子目录)下面的找所有文件名以
.test.js
结尾的文件能被 require 的文件。 更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
import Vue from 'vue';
import IconSvg from '@/components/IconSvg/IconSvg.vue'; // 全局注册icon-svg
Vue.component('icon-svg', IconSvg); // requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./svg', true, /\.svg$/);
requireAll(req);
- 之后我们就要使用到 webpack 的 require.context。很多人对于
- svg-sprite-loader 依赖 install
- 它是一个 webpack loader ,可以将多个 svg 打包成
svg-sprite
。 - 我们发现
vue-cli
默认情况下会使用url-loader
对svg进行处理,会将它放在/img
目录下,所以这时候我们引入svg-sprite-loader
会引发一些冲突。 //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader 进行处理。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
- 它是一个 webpack loader ,可以将多个 svg 打包成
- 解决方案有两种,最简单的就是你可以将 test 的 svg 去掉,这样就不会对svg做处理了,当然这样做是很不友善的。
- 你不能保证你所有的 svg 都是用来当做 icon的,有些真的可能只是用来当做图片资源的。
- 不能确保你使用的一些第三方类库会使用到 svg。
- 所以最安全合理的做法是使用 webpack 的 exclude 和 include ,让
svg-sprite-loader
只处理你指定文件夹下面的 svg,url-loaer
只处理除此文件夹之外的所以 svg,这样就完美解决了之前冲突的问题。 代码如下 - 这只是cli2 的配置, cli3 配置都在vue.config.js 里面 详情参看文档 webpack相关 | vue-cli3
- 这里吧我自己写的给贴出来
module.exports = {
lintOnSave: true,
baseUrl: './',
productionSourceMap: process.env.NODE_ENV !== 'production',
chainWebpack: (config) => {
config.resolve.alias.set('@images', resolve('./src/assets/images'));
config.resolve.alias.set('@svg', resolve('./src/icons/svg'));
config.module.rules.delete('svg'); // 重点:删除默认配置中处理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons/svg')) // 处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
});
},
......
- 解决方案有两种,最简单的就是你可以将 test 的 svg 去掉,这样就不会对svg做处理了,当然这样做是很不友善的。
这样配置好了,开始使用了.
<icon-svg
icon-class="send"
className="icon"
/>
效果
参考链接: 手摸手,带你优雅的使用 icon
更详细的 可以去看看上面链接,大神带你飞
在vue-cli3中优雅的使用 icon的更多相关文章
- Vue Cli3 中别名的配置问题
Vue Cli3 中别名的配置问题 vue-cli3中是没有config.build等目录的,这是因为vue-cli3中将这些配置隐藏起来了,如果想要修改,可以在vue.config.js文件中进行修 ...
- @vue/cli3中解决Elint中console.log报错的问题
方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...
- 「Vue」Vue cli3中引用mui-ui问题及解决办法
1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...
- 「Vue」vue cli3中axios的基本用法
1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
- 如何在Vue项目中优雅的使用swiper插件
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...
- 【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程
前言 之前写过滤器的时候都是 用 if switch 来进行值的判断 返回对应的值, 在没去百度搜索之前都是都是这样写的 ) { return "支付成功"; } ) { retu ...
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
随机推荐
- 微信小程序 TLS 版本必须大于等于1.2问题解决
微信小程序 TLS 版本必须大于等于1.2问题解决 此问题最近在微信小程序开发中,比较常见. 在解决这个问题之前,我们需要了解一下,当前的系统环境是否支持TLS1.2以上,可以参考一下表格: 确认系 ...
- tensorflow Pipeline 之TextLineReader 和decode_csv多分割替代方案
1.TextLineReader reader = tf.TextLineReader() key, value = reader.read(filename_queue) record_defaul ...
- file 多次上传附件功能完善
之前解决了一个页面中的单个附件上传问题,使用的是 id 定位.但是一个页面中,可能存在多个附件上传的地方,这时候如果继续使用 id,会出问题. 我依旧会上传一个附件.附件链接地址: https://f ...
- day16,模块 , 用户管理系统 , 购物车程序 , 分页显示.
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.列举你常见的内置函数."""强制转换:int() / str() / li ...
- Docker实践之02-使用镜像及定制
目录 一.获取镜像 二.使用镜像启动容器实例 三.列出镜像 四.删除本地镜像 五.定制镜像 通过commit命令定制镜像 通过Dockerfile定制镜像 docker build的工作原理 dock ...
- IE7下使用兼容Icon-Font CSS类
Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用. @font-face {font-family: "anticon&quo ...
- sql server登录名、服务器角色、数据库用户、数据库角色、架构区别联系
原创链接:https://www.cnblogs.com/lxf1117/p/6762315.html sql server登录名.服务器角色.数据库用户.数据库角色.架构区别联系 1.一个数据库用户 ...
- 谷歌浏览器安装json格式化插件
1.下载JsonView扩展程序压缩包 下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 点击[Clone or download] ...
- asp.net webapi 获取报文体的问题
用这种方法: var data=await Request.Content.ReadAsStringAsync(); 一般都无法获取到内容.原因是内部的流对象已经到了最后面.要获取到里面的需要把流的位 ...
- axios formData提交数据 && axios设置charset无效???
但是这样会出现一个问题,什么问题呢? 我设置了请求头编码utf-8,但是没生效 content-type里面没有出现utf-8???????查了很多资料,说这是axios固有的bug,我....... ...