VUE-cli3使用 svg-sprite-loader

Vue CLI 3中使用svg-sprite-loader插件：轻松管理SVG图标

使用svg-sprite技术的好处：

1. 页面代码更加清爽，减少HTTP请求。

2. 可通过ID随时调用，避免重复引入相同的SVG文件。

3. 每个SVG图标都可以独立调整大小和颜色。

安装svg-sprite-loader插件：

我们需要通过npm安装svg-sprite-loader插件：

```bash

npm install svg-sprite-loader --save-dev

```

配置Webpack：

在Vue CLI 3项目中，我们需要对Webpack进行配置以使用svg-sprite-loader插件。打开`vue.config.js`文件，在其中添加以下配置：

```javascript

const path = require('path');

function resolve(dir) {

return path.join(__dirname, '.', dir);

}

module.exports = {

chainWebpack: config => {

config.module.rules.delete('svg'); // 删除默认配置中对SVG的处理

config.module

.rule('svg-sprite-loader')

.test(/\.svg$/)

clude.add(resolve('src/icons')) // 指定处理SVG图标的目录

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]' // 设置生成的symbol标签的ID规则

});

}

};

```

使用SVG图标：

配置完成后，我们可以开始使用SVG图标了。将所有需要使用的SVG图标放置在指定的目录下（例如`src/icons`）。然后，在项目中的任何地方，通过以下方式引入SVG图标：

```javascript

import './src/icons/target.svg';

```

```html

```

这里的`target`就是你要使用的SVG图标的文件名（不包含扩展名`.svg`）。

自动导入：

为了简化操作，我们还可以实现自动导入功能。这样，`src/icons/svg/`下的所有SVG文件都会自动导入。这样，我们就可以更轻松地管理和使用SVG图标了。具体的自动导入配置可以根据项目需求进行定制。

使用svg-sprite-loader插件，我们可以轻松管理SVG图标，使代码更加简洁、易于维护。通过配置Webpack，我们可以实现自动导入功能，进一步提高开发效率。Webpack的力量：智能管理SVG图标

你是否曾经为了管理和引入大量的SVG图标而烦恼？Webpack能为你解决这个问题。借助Webpack的强大功能，我们可以轻松地引入并管理所有的SVG文件。让我们深入了解一下具体的操作过程。

有一个非常有用的方法叫做`requireAll`，它能将匹配的所有模块一并引入。这个操作主要依赖于`requireContext`函数，该函数能够获取所有匹配的模块，并返回一个context对象。这个对象有一个`keys()`方法，能够返回所有模块的路径，然后我们可以使用`map()`函数配合`requireContext`来引入所有模块。代码示例如下：

```javascript

const requireAll = requireContext => requireContext.keys().map(key => requireContext(key));

const req = require.context('./assets/svg', true, /\.svg$/);

requireAll(req);

```

这段代码的目的是将所有SVG文件引入项目中。这样我们就可以在项目中直接使用这些SVG文件了。

接下来，在main.ts中引入一个名为'./icons/index'的模块。这个模块的作用是导入并注册全局组件SvgIcon。SvgIcon组件是一个封装了SVG图标的Vue组件，它允许我们方便地在使用的地方调用SVG图标。组件代码如下：

```vue