在 Vue.js 应用中，SVG 图标组件是一种高效且灵活的方式来管理和展示矢量图标。与传统的图标字体相比，SVG 图标提供了更好的可缩放性和清晰度，尤其在高分辨率屏幕中。本篇文章将详细介绍如何在 Vue 中编写 SVG 图标组件。
我们探讨一下将图标从图标字体迁移到 SVG 的原因。SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图像格式，它允许图标在任何尺寸下保持清晰，且文件大小通常小于图标字体。此外，SVG 图标可以通过 CSS 直接进行样式控制，如改变颜色、大小等，这使得它们在响应式设计中更具优势。
在 Vue 中实现 SVG 图标组件，我们可以采用以下步骤：
1. **创建 Svg-icon 组件**：我们需要创建一个新的 Vue 组件文件 `Svg-icon.vue`。在这个组件中，我们将定义三个 prop：
- `icon`：接收一个字符串，表示 SVG 图标的文件名。
- `hasFill`：布尔类型，如果设置为 true，则允许通过 fill 属性改变 SVG 元素的颜色，默认为 false。
- `growByHeight`：布尔类型，若为 true，高度将根据字体大小缩放，反之宽度会按比例缩放，默认为 true。
```html
<template>
<div v-html="require(`html-loader!../assets/svg/${icon}.svg`)" class="svg-container"></div>
</template>
<script>
import { recursivelyRemoveFill } from './utils'; // 导入辅助函数
export default {
name: 'svg-icon',
props: {
icon: { type: String, default: null },
hasFill: { type: Boolean, default: false },
growByHeight: { type: Boolean, default: true },
},
mounted() {
// ... 见下文
},
};
</script>
<style lang="scss" scoped>
.svg-container {
display: inline-block;
}
</style>
```
2. **处理 SVG 元素**：在 `mounted()` 生命周期钩子中，我们检查组件的第一个子元素是否为 `<svg>`。如果是，我们对 SVG 元素进行一些必要的调整。如果 `hasFill` 为 true，我们会递归地移除所有填充属性，以确保可以使用 CSS 控制颜色。然后，根据 `growByHeight` 的值，我们设置 SVG 元素的宽高，使其相对于字体大小缩放。添加一个 CSS 类以便于外部样式控制。
3. **使用 html-loader**：为了将 SVG 文件导入到 Vue 模板中，我们需要借助 `html-loader`。这个 npm 模块可以将 SVG 文件转换为内联字符串，然后通过 `v-html` 指令插入到 DOM 中。
4. **CSS 样式**：在 `<style>` 标签中，我们可以定义 `.svg-container` 类，以设置 SVG 图标的显示方式。通常，我们会将其设置为 `inline-block`，以便与其他文本元素并排显示。还可以根据需要添加其他样式规则，如调整边距、填充等。
通过这种方式，我们可以创建一个可复用的 SVG 图标组件，不仅可以轻松地在应用中引入 SVG 图标，还能利用 Vue 的组件化特性实现更复杂的样式和交互。这使得 Vue 应用中的图标管理变得更加灵活和高效。
