Vue-icon-svg 是一个方便易用的 Vue 组件库，它提供了许多常见的 SVG 图标，如 GitHub、Twitter 和 Facebook 等。该组件库通过 Vue 插槽机制，使得用户可以自由修改 SVG 的颜色、大小、边框等属性。
安装
使用 NPM 包管理器或 Yarn 安装该组件库。
npm install vue-icon-svg --save
yarn add vue-icon-svg
使用
在 Vue 项目中，可以通过以下三种方式来使用 vue-icon-svg 组件：
全局导入
在项目的入口 js 文件中，导入 vue-icon-svg 组件并注册全局组件。
import Vue from 'vue' import VueIconSvg from 'vue-icon-svg' Vue.use(VueIconSvg)
现在，你可以在任何 Vue 组件中使用 vue-icon-svg 图标组件了。
-- -------------------- ---- -------
----------
-----
----- ------------- --
----- -------------- --
----- --------------- --
------
-----------
--------
------ ------- -
----- --------------
----------- -
------- ----------
-
-
---------局部导入
如果你只需要在某个 Vue 组件中使用 vue-icon-svg 组件，你也可以局部导入该组件。
-- -------------------- ---- -------
----------
-----
----- ------------- --
----- -------------- --
----- --------------- --
------
-----------
--------
------ - ---- - ---- --------------
------ ------- -
----- --------------
----------- -
------- ----
-
-
---------动态导入
如果你需要异步加载 vue-icon-svg 组件，你可以使用 Vue 的动态导入功能。
-- -------------------- ---- -------
----------
-----
------- -------------------------------
--------- --------------------
----- ------------- --
----- -------------- --
----- --------------- --
-----------
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
------------- -----
-
--
-------- -
----- ---------- -
----- - ---- - - ----- ----------------------
--------------------- -----
----------------- - ----
-
-
-
---------自定义图标
除了 vue-icon-svg 组件库提供的 SVG 图标之外，你还可以自定义 SVG 图标。
-- -------------------- ---- -------
----------
-----
----- ------------- --
------
-----------
--------
------ - ---- - ---- --------------
------ ------ ---- --------------
------ ------- -
----- --------------
----------- -
------- ----
--
--------- -
------------------ -
------ ---
------- ---
-------- -- - -- ----
----- ------
--
-
-
---------插槽使用
vue-icon-svg 组件库提供了三个插槽，用于在 SVG 图标中插入其他内容。
-- -------------------- ---- -------
----------
-----
----- ---------------
----- ------------------------ -- -- --------------
-------
------
-----------
--------
------ ------- -
----- --------------
----------- -
------- ----
-
-
---------常用属性
vue-icon-svg 组件库提供了一些常用属性，用于控制 SVG 图标的颜色、大小、边框等。
-- -------------------- ---- -------
----------
-----
----- ------------- ------------ --------- ----------- ----- ----- --
------
-----------
--------
------ ------- -
----- --------------
----------- -
------- ----
-
-
---------总结
vue-icon-svg 组件库提供了方便易用的 SVG 图标组件，使得开发者可以快速获取高质量的图标资源，并可以自定义 SVG 图标。同时，该组件库还提供了插槽和常用属性，方便开发者进行 SVG 图标的样式控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566af81e8991b448e2ed9