vue-cli3中使用svg，添加svg-sprite-loader和file-loader

最新推荐文章于 2024-08-22 08:29:17 发布

-JUNER-

最新推荐文章于 2024-08-22 08:29:17 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue svg

原文链接：https://www.jianshu.com/p/1150876dfa04

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

使用svg组件

//引入svg组件
import IconSvg from '@/components/IconSvg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

//在代码中使用
<icon-svg icon-class="password" />

3.svg雪碧图

我们已经能在项目中使用svg图标了，但是有一个麻烦是，eg：我们会在iconfont上面创建一个项目，然后把需要的图标添加到项目里，接下来再生成文件，然后把文件保存下来。然而当我再去添加几个图标的时候，上面的动作我们需要重来一遍，这个太麻烦了，所以我们会用到svg-sprite(svg雪碧图,跟以前的css-sprite类似)。具体操作如下:

1.在vue项目中配置svg-sprite-loader

// vue.config.js
const path = require('path')
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  }
}

2.使用svg
配置好以后，我们把svg文件都放到根目录的icons下面，使用的时候，需要那个就加载那个，举例：(这里的svg-icon是我们上面封装的svg组件)

<template>
  <div id="app">
    <svg-icon iconClass="me"></svg-icon>
  </div>
</template>

<script>
import '@/icons/svg/me.svg'
export default {
  
}
</script>

我们在项目中使用了很多svg图标，svg-sprite-loader能帮我们把这些图标合成一张大的雪碧图，就像这样

在这里插入图片描述

4.自动导入所有图标

经过上面的一波操作，我们实现了按需加载，如果我们要添加图标，直接往icons里放就好了，这个svg的图标可以是你们ui制作的，也可以是从iconfont图标库download下来的。不过，这里还有两个地方可以再优化一下。

1.自动导入所有图标

首先我们创建一个专门放置图标 icon 的文件夹如：@/src/icons，将所有 icon 放在这个文件夹下。之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生，直白的解释就是

require.context("./test", false, /.test.js$/);
//这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数：

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式

了解这些之后，我们就可以这样写来自动引入 @/src/icons 下面所有的图标了

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

复制代码之后我们增删改图标直接直接文件夹下对应的图标就好了，什么都不用管，就会自动生成 svg symbol了。

1.批量下载单个svg文件
我们上面的操作，在icons里面，一个svg文件就是一个图标，而阿里图标库下载下来的文件是把所有的图标都合在一个文件里面，这显然不符合我们的要求，但是一个一个去下载也觉得麻烦，这时可以这样操作
在这里插入图片描述
2.点击批量操作，选择要添加的图标，点击批量加入到购物车，去购物车页面，点击下载素材，出现以下页面，点击svg即可