在 Vue.js 的开发中，UI 组件的使用是无法避免的。而图标在 UI 中起到了不小的作用，如何高效的使用大量的图标呢？这时候就需要使用到一款比较好用的 npm 包：vue-material-svg-icons。
vue-material-svg-icons 简介
vue-material-svg-icons 是一个基于 Material Design Icons 的 Vue.js 组件库，它提供了一组可扩展、可定制和高质量的 SVG 图标。由于它是以组件库的形式提供的，因此可以轻松导入和使用其中的图标。
安装
在使用 vue-material-svg-icons 之前，需要先安装它。
npm install vue-material-svg-icons
使用方法
全局注册
在 main.js 中，可以将 vue-material-svg-icons 作为全局组件注册：
import Vue from "vue"; import VueMaterialSvgIcons from "vue-material-svg-icons"; import "vue-material-svg-icons/dist/vue-material-svg-icons.css"; Vue.use(VueMaterialSvgIcons);
在这种方式下，可以在应用的任何组件中使用 <icon> 标签来使用图标，例如：
<icon name="account_circle"></icon>
局部注册
如果你只想在局部组件中使用 vue-material-svg-icons，可以在组件中进行注册：
-- -------------------- ---- -------
------ - ---- - ---- -------------------------
------ ---------------------------------------------------------
------ ------- -
----------- -
-----
--
-- ---
-然后在组件中使用 <icon> 标签即可。
图标名称与尺寸
在使用时，需要指定图标的名称和尺寸。名称可参考 Material Design Icons 的官方网站。尺寸可以通过 CSS 的 font-size 来设置。
<icon name="account_circle" size="24"></icon>
颜色
可以通过 CSS 的 color 来设置图标的颜色。
<icon name="account_circle" size="24" style="color: red;"></icon>
旋转和翻转
可以通过传入 props 来设置图标的旋转和翻转效果。
<icon name="account_circle" size="24" :rotate="90" :flip="{'horizontal': true}"></icon>路径样式
可以通过 CSS 的 fill、stroke、stroke-width 等属性来设置 SVG 路径样式。
<icon name="account_circle" size="24" style="fill: green;"></icon>
总结
vue-material-svg-icons 是一款好用的 npm 包，它为我们提供了一组高质量、可扩展和可定制的 SVG 图标。通过本文的介绍，希望能够给前端开发者带来一些指导和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005528481e8991b448cffe7