Vue-SVG-Icon 使用教程

1. 项目介绍

Vue-SVG-Icon 是一个轻量级的 Vue 2 多色动态 SVG 图标解决方案。它允许你在 Vue 项目中轻松使用多色 SVG 图标，并且支持通过 CSS 动态调整 SVG 图标的颜色。该项目的主要特点包括：

• 无需在 main.js 中注入 SVG。
• 支持 SVG 文件中的 path、circle、ellipse、rect、line、polyline、polygon 标签。
• 支持 SVG 文件中的编组标签。
• 可以在 Illustrator 或 Sketch 中实时编辑 SVG 图片。
• 通过 CSS 的 color 属性动态设置 SVG 中某一部分的颜色。

2. 项目快速启动

2.1 安装

首先，通过 npm 安装 vue-svg-icon：

npm install vue-svg-icon --save-dev

2.2 配置

将你的 SVG 文件放入 src/svg/ 目录中。注意，src 文件夹应与 node_modules 在同一个文件夹下。

2.3 引入组件

在项目的 main.js 入口文件中引入 vue-svg-icon：

import Vue from 'vue';
import Icon from 'vue-svg-icon/Icon.vue';

Vue.component('icon', Icon);

2.4 使用

在 Vue 组件中使用 icon 标签来显示 SVG 图标：

<template>
  <div>
    <icon name="chameleon" :scale="20"></icon>
  </div>
</template>

3. 应用案例和最佳实践

3.1 动态颜色调整

Vue-SVG-Icon 允许你通过 CSS 动态调整 SVG 图标的颜色。例如，你可以通过设置 color 属性来改变图标的颜色：

<template>
  <div>
    <icon name="chameleon" :scale="20" style="color: red;"></icon>
  </div>
</template>

3.2 在 Illustrator 中编辑 SVG

在 Illustrator 中编辑 SVG 图片时，注意以下几点：

• 所有的矩形、线段等需转成复合路径再保存（v1.1.0 后不再需要）。
• 第一次编辑完保存时，请选择“另存为”，在“高级选项”中将“CSS 属性”设置成演示文稿属性。
• 需要通过 CSS 动态设置颜色等部分请将填充色设为纯黑（#000000），如果想设置黑色但不受 SVG 的 color 影响请将填充色设为（#000001）。

4. 典型生态项目

4.1 Iconfont

Iconfont 是一个非常流行的 SVG 图标库，你可以从中获取大量的 SVG 图标，并将其集成到 Vue-SVG-Icon 中使用。

4.2 Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，它可以帮助你快速搭建 Vue 项目，并集成 Vue-SVG-Icon 等插件。

4.3 Babel

Babel 是一个 JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。在集成 Vue-SVG-Icon 时，你可能需要配置 Babel 以支持特定的插件。

通过以上步骤，你可以轻松地在 Vue 项目中使用 Vue-SVG-Icon，并实现多色动态 SVG 图标的效果。