•  首先我们得有图标

    • 这里我们从网上下载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);
  •  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]')
      }
      }
    • 解决方案有两种,最简单的就是你可以将 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]',
      });
      },
      ......

  这样配置好了,开始使用了.

  

<icon-svg
icon-class="send"
className="icon"
/>

效果

参考链接: 手摸手,带你优雅的使用 icon

更详细的 可以去看看上面链接,大神带你飞

在vue-cli3中优雅的使用 icon的更多相关文章

  1. Vue Cli3 中别名的配置问题

    Vue Cli3 中别名的配置问题 vue-cli3中是没有config.build等目录的,这是因为vue-cli3中将这些配置隐藏起来了,如果想要修改,可以在vue.config.js文件中进行修 ...

  2. @vue/cli3中解决Elint中console.log报错的问题

    方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...

  3. 「Vue」Vue cli3中引用mui-ui问题及解决办法

    1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...

  4. 「Vue」vue cli3中axios的基本用法

    1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...

  5. 如何在Vue项目中优雅的使用sass

    开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...

  6. 如何在Vue项目中优雅的使用swiper插件

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...

  7. 【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程

    前言 之前写过滤器的时候都是 用 if switch 来进行值的判断 返回对应的值, 在没去百度搜索之前都是都是这样写的 ) { return "支付成功"; } ) { retu ...

  8. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  9. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

随机推荐

  1. 微信小程序 TLS 版本必须大于等于1.2问题解决

    微信小程序  TLS 版本必须大于等于1.2问题解决 此问题最近在微信小程序开发中,比较常见. 在解决这个问题之前,我们需要了解一下,当前的系统环境是否支持TLS1.2以上,可以参考一下表格: 确认系 ...

  2. tensorflow Pipeline 之TextLineReader 和decode_csv多分割替代方案

    1.TextLineReader reader = tf.TextLineReader() key, value = reader.read(filename_queue) record_defaul ...

  3. file 多次上传附件功能完善

    之前解决了一个页面中的单个附件上传问题,使用的是 id 定位.但是一个页面中,可能存在多个附件上传的地方,这时候如果继续使用 id,会出问题. 我依旧会上传一个附件.附件链接地址: https://f ...

  4. day16,模块 , 用户管理系统 , 购物车程序 , 分页显示.

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.列举你常见的内置函数."""强制转换:int() / str() / li ...

  5. Docker实践之02-使用镜像及定制

    目录 一.获取镜像 二.使用镜像启动容器实例 三.列出镜像 四.删除本地镜像 五.定制镜像 通过commit命令定制镜像 通过Dockerfile定制镜像 docker build的工作原理 dock ...

  6. IE7下使用兼容Icon-Font CSS类

    Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用. @font-face {font-family: "anticon&quo ...

  7. sql server登录名、服务器角色、数据库用户、数据库角色、架构区别联系

    原创链接:https://www.cnblogs.com/lxf1117/p/6762315.html sql server登录名.服务器角色.数据库用户.数据库角色.架构区别联系 1.一个数据库用户 ...

  8. 谷歌浏览器安装json格式化插件

    1.下载JsonView扩展程序压缩包 下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 点击[Clone or download] ...

  9. asp.net webapi 获取报文体的问题

    用这种方法: var data=await Request.Content.ReadAsStringAsync(); 一般都无法获取到内容.原因是内部的流对象已经到了最后面.要获取到里面的需要把流的位 ...

  10. axios formData提交数据 && axios设置charset无效???

    但是这样会出现一个问题,什么问题呢? 我设置了请求头编码utf-8,但是没生效 content-type里面没有出现utf-8???????查了很多资料,说这是axios固有的bug,我....... ...