在前端开发中，往往需要使用一些图标或矢量图来美化页面或按钮等元素。而 SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 语法的矢量图形格式，能够实现完美显示和无限放大而不失真。在 Vue.js 项目中，我们可以通过使用 npm 包 vue-svg2-loader 将 SVG 文件转换为 DOM 元素，从而方便使用和管理。
安装和配置
首先，我们需要使用 npm 安装 vue-svg2-loader 和包含 SVG 文件的依赖库 svg-sprite-loader：
npm install vue-svg2-loader svg-sprite-loader --save-dev
接下来，我们在 webpack 的配置文件中添加对 vue-svg2-loader 和 svg-sprite-loader 的支持，以及对 SVG 文件的过滤规则：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-- - --- ------
-
----- ---------
---- -
-
------- --------------------
-------- --
--
-
------- ------------------
-------- --
-
-
-
-
-
-其中，vue-svg2-loader 的配置项 options 可以设置 svgo 的选项，用于压缩和优化 SVG 文件。
使用示例
假设我们有一个名为 star.svg 的 SVG 文件，首先我们需要将其放置在 src/assets/svg 目录下。
在 Vue.js 的组件中，我们可以使用以下方式引入 SVG 图标：
-- -------------------- ---- -------
----------
--------- ----------- --
-----------
--------
------ ------- ---- --------------------------
------ ------- -
----------- -
-------
-
-
---------其中，name 属性对应 SVG 文件名（不含扩展名），SvgIcon 组件用于将 SVG 文件转换为 DOM 元素显示在页面上。在以上代码中，我们需要自己创建一个名为 SvgIcon.vue 的组件，其代码如下：
-- -------------------- ---- -------
----------
---- ---------------- --------------- ---------------------
---- ---------------------- --
------
-----------
--------
------ ------- -
----- ----------
------ -
----- -
----- -------
--------- ----
--
----- -
----- -------
-------- --
--
------ -
----- -------
-------- --
--
---------- -
----- -------
-------- --
--
------ -
----- -------
-------- -- -- ----
-
--
--------- -
--------- -
----- - --------- - - ----
------ -
------------ ---------
-
--
-------- -
----- - ----- ------ ----- - - ----
------ -
------ ------------
------- ------------
----- ------
--------
-
--
---------- -
------ --------------------
-
--
-------- -
------------- -
-------------------
-
-
-
---------该组件具有以下属性：
- name：SVG 文件名。
- size：DOM 元素大小，默认为 16 像素。
- color：填充颜色，默认为空。
- className：额外的样式类名。
- style：额外的样式设置。
以上组件代码将 SVG 文件作为一个全局 symbol 使用，这是我们采用 svg-sprite-loader 的方式实现的。通过 use 标签的 xlink:href 属性引入 SVG 文件，符号 ID 以 icon- 前缀加上 SVG 文件名的方式命名。这种方式实现了 SVG 的重用，大大减少了文件体积和加载时间。
如果需要显示一个具有部分 SVG 效果的按钮或输入框，可以将 SVG 图标和 HTML 及其样式一同封装到一个 Vue.js 组件中，以实现更复杂的效果。
结语
Vue.js 提供了一些方便的工具和 API 来帮助我们更好地管理和使用 SVG 文件，而 npm 包 vue-svg2-loader 的加入为项目的开发提供了更加便捷和高效的方式。在实际开发中，我们可以根据项目的需要选择合适的技术和库来实现最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058b1881e8991b448ed3c3