浅谈Vue CLI 3中封装Svgicon组件的正确方法（推荐）
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文将探讨如何在Vue CLI 3环境下高效地封装和使用Svgicon组件，分享最佳实践与注意事项，帮助开发者提升项目质量和开发效率。
Vue CLI 3 是一款强大的 Vue.js 项目脚手架工具，它简化了项目的初始化和配置过程。在开发过程中，为了优化项目资源，有时我们会选择将 SVG 图标封装为组件，这样可以减少 HTTP 请求，提高页面加载速度。本篇文章将详细介绍如何在 Vue CLI 3 环境下正确封装 Svgicon 组件。
首先，在 `src` 目录下创建一个新的文件夹用于存储 SVG 图标。例如，我们可以命名为 `Iconssvg`。这个文件夹将会存放所有的 SVG 文件，如 `a.svg`、`b.svg` 等。
接下来，我们需要在 `components` 文件夹中创建一个名为 `Svgicon` 的组件。该组件将作为 SVG 图标的容器，并允许我们动态地引用和展示图标。以下是一个基本的 `Svgicon.vue` 组件示例：
```html
```
这个组件通过 `props` 接收 `iconClass`，根据该属性来决定要显示哪个 SVG 图标。在计算属性中，`iconName` 计算出图标对应的 `xlink:href` 值；而 `svgClass` 处理自定义类名。
为了使这些 SVG 图标能够在项目中正常使用，我们需要配置 webpack 的 loader 来处理 SVG 文件。安装 `svg-sprite-loader` 插件：
```bash
npm install svg-sprite-loader --save-dev
```
然后，在项目的 `vue.config.js` 中添加以下配置来配置 webpack 使用这个插件：
```javascript
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule(svg);
svgRule.uses.clear();
svgRule.use(svg-sprite-loader).loader(svg-sprite-loader).options({ symbolId: icon-[name] });
}
}
```
这将配置 webpack 使用 `svg-sprite-loader` 处理 SVG 文件，并设置 `symbolId` 为 `icon-[name]`, 方便在组件中引用。
为了让组件能在全局范围内使用，我们需要在入口文件（通常是 `main.js`）中注册 `Svgicon` 组件：
```javascript
import Vue from vue;
import App from ./App.vue;
import Svgicon from @/components/Svgicon;
Vue.component(Svgicon, Svgicon);
new Vue({
render: h => h(App),
}).$mount(#app);
```
至此，我们就完成了在 Vue CLI 3 中封装和使用 SVG 图标的整个过程。现在可以在任何组件中通过 `
全部评论 (0)
