随着前端技术的发展，越来越多的网站使用 SVG 图标作为页面的装饰元素，而使用 Vue 提供的组件化开发方式可以提高开发效率，同时也便于维护、复用和扩展。 vue-svg-custom-icon 是一个可自定义 SVG 图标的 Vue 组件库，支持自定义图标颜色、大小和类名，丰富了前端开发的工具链。本文将详细介绍该库的使用方法和示例。
安装
使用 npm 安装 vue-svg-custom-icon：
npm install vue-svg-custom-icon
使用 yarn 安装 vue-svg-custom-icon：
yarn add vue-svg-custom-icon
使用
引用 vue-svg-custom-icon：
import SvgIcon from 'vue-svg-custom-icon' import 'vue-svg-custom-icon/lib/svg-icon.css' Vue.use(SvgIcon)
使用：
<svg-icon name="calendar" color="#" size="#" class="#" />
参数说明：
name: 必选参数，图标名称，需要与 SVG 文件名称保持一致。color: 可选参数，图标颜色，支持 HEX 和 RGB 两种格式。size: 可选参数，图标大小，默认为16px。class: 可选参数，图标类名。
示例
以下是一个简单示例：
-- -------------------- ---- -------
----------
-----
------- ---------
--------- --------------- --------------- --------- ---------------------- --
------
-----------
--------
------ ------- ---- ---------------------
------ --------------------------------------
------ ------- -
----------- -
-------
-
-
---------总结
vue-svg-custom-icon 提供了一种简单的方法来自定义 SVG 图标根据需求进行二次开发，同时也方便了前端工作的效率。在日常开发中，使用 vue-svg-custom-icon 可以提高代码的复用性，缩短开发周期，这也是其成为前端技术优化的必不可少组成部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b8f