简介
vuejs-svg-icon 是一个基于 SVG 的图标库，它提供了一种简单、快速、灵活地在 Vue.js 中使用图标的方式。借助这个包，我们可以轻松地在项目中使用常见的图标，同时也可以自定义自己的图标并扩展到更广泛的应用场景中。
本文将为大家介绍 vuejs-svg-icon 的使用方法及相关注意事项。
安装
使用 npm 安装：
npm install vuejs-svg-icon --save
使用
- 在项目中引用插件，并配置:
import svgIcon from 'vuejs-svg-icon'
Vue.use(svgIcon, {
tagName: 'svg-icon'
})此处将使用者自定义组件名称设置为 svg-icon。
- 在组件中使用自定义组件
<svg-icon name="图标名称" width="100" height="100"></svg-icon>
以上代码会在页面中渲染一个宽为 100px、高为 100px 的图标，并显示该图标的名称。
图标列表
该插件提供了一个官方图标库，可以通过以下链接查阅官方图标库及其对应的名称。
自定义图标
作为一款强大的图标库，vuejs-svg-icon 也支持自定义图标。只需要通过以下步骤，即可将自定义图标加入图标库。
- 将 SVG 图标的代码加入你的项目中，并将其引入自己的组件中。
import myIcon from './myIcon.svg'
- 注册图标。
Vue.use(svgIcon, {
tagName: 'svg-icon',
isOriginalSource: true, // 表示为自定义图标库的标志
iconClasses: {
'my-icon': myIcon // 将 icon 的名称映射到其相应的图标
}
})- 在需要的地方使用该图标
<svg-icon name="my-icon"></svg-icon>
注意事项
- 使用这个插件需要 vue.js 版本在2.0以上。
- 如果想要使用自定义图标名称，请将图标名称定义为 kebab-case 命名法（即采用小写字母，使用短横线分割）。
- 如果在组件里应用了 vuejs-svg-icon ，应该使用 Vue.component 定义该组件，而不是使用 Vue.extend。
- 在某些特定情况下，可能需要使用use标记来注册组件，并将svg作为参数传递。在这种情况下，建议使用symbol方式创建SVG元素并引入SVG文件来显示图标。
总结
vuejs-svg-icon 插件为我们提供了一种简单、快速、灵活的方式来处理图标的使用，同时也支持自定义图标。我们从本文学习了如何安装和使用 vuejs-svg-icon 插件，了解了相关注意事项，希望本文能够帮助到您。
示例代码
-- -------------------- ---- -------
----------
-----
--------- ------------------- ---------- -----------------------
--------- ------------------- ---------- -----------------------
--------- ------------------ ---------- -----------------------
--------- ----------------- ---------- -----------------------
--------- ----------------- ---------- -----------------------
--------- ----------- ---------- -----------------------
--------- --------------- ---------- -----------------------
------
-----------
--------
------ ------- ---- ----------------
------ ------- -
----------- -
-------
-
-
---------
-------
-------- -
------------- -----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608581e8991b448deb9d