使用 Svg Icon 图标的最佳实践

在若依前后端分离项目中，图标的使用是通过全局注册的 Svg Icon 组件实现的。这一组件在项目的任何地方都可以使用，极大地方便了开发和维护。下面将详细讲解如何使用 Svg Icon 组件，以及如何通过修改样式来自定义图标的颜色和大小。

一、全局注册 Svg Icon 组件

在项目中，Svg Icon 组件已经被全局注册，所有图标都存放在 @/icons/svg 目录中。只需将 .svg 文件放入该目录，项目启动时这些图标就会自动被引入，无需手动操作。

二、Svg Icon 的使用方法

Svg Icon 组件的使用非常简单，可以通过 icon-class 和 class-name 属性来指定图标和自定义样式类。

<svg-icon icon-class="password" class-name="custom-class" />

• icon-class：指定图标的名称，对应 @/icons/svg 目录下的 .svg 文件名（不包含扩展名）。
• class-name：可选，用于传入自定义的 CSS 类名，以便进一步控制图标的样式。

三、改变 Svg Icon 的颜色

Svg Icon 组件默认会读取其父级元素的 color，即 fill: currentColor。这意味着可以通过改变父级元素的 color 属性来修改图标的颜色，也可以直接通过 fill 属性进行颜色控制。

示例 1：通过父级元素控制颜色

<template>
  <div style="color: #42b983;">
    <svg-icon icon-class="password" />
  </div>
</template>

在此示例中，Svg Icon 图标的颜色会被设置为 #42b983。

示例 2：直接修改 fill 属性

<template>
  <svg-icon icon-class="password" class-name="custom-class" />
</template>

<style scoped>
.custom-class {
  fill: #f56c6c;
}
</style>

在此示例中，通过直接设置 .custom-class 的 fill 属性，可以将图标的颜色改为 #f56c6c。

四、图标大小规范

在项目中，所有使用的图标应尽量保持大小一致，以确保界面视觉的统一性。建议使用 128x128 像素的图标，如果从 iconfont 或其他平台下载的图标大小不统一，建议使用设计工具（如 Sketch、Illustrator）对图标进行调整。

提示

• 自动引入：将 .svg 文件放入 @/icons/svg 目录后，图标会自动导入项目，无需额外操作。
• 图标规范：下载图标后，务必使用设计工具调整至统一尺寸，建议大小为 128x128 像素。

总结

Svg Icon 组件在若依项目中的应用非常方便，通过简单的配置即可在全局范围内使用任意图标，并且可以轻松自定义样式。为了确保图标的统一性，建议在使用图标前，确保所有图标的尺寸和风格一致。通过以上指南，您可以更高效地管理和使用项目中的图标资源。