在前端开发中，SVG（可缩放矢量图形）是非常常用的图像格式。然而，通过 <img> 标签引入 SVG 图片，会导致浏览器无法解析内部的 CSS 样式，从而限制了 SVG 的可定制性。为了解决这个问题，我们可以使用 @marlow/vue-svg-loader 这个 npm 包，使 SVG 能够被 Vue 以组件形式使用。
安装 @marlow/vue-svg-loader
我们可以通过 npm 安装 @marlow/vue-svg-loader，步骤如下：
npm install @marlow/vue-svg-loader --save-dev
配置 webpack
接下来，我们需要在 webpack 中配置 @marlow/vue-svg-loader。以下是一个简单的 webpack 配置示例：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- -------------------------
-------- -
----- -
-------- -
- -------------- ----- --
- ----------------- ---- --
--
--
--
--
--
--
--
--
--上面这个示例中，我们在 webpack 的 module.rules 中添加了一个针对 SVG 格式的规则。它使用了 @marlow/vue-svg-loader，将 SVG 文件转化为 Vue 组件。
其中，我们可以给 @marlow/vue-svg-loader 的 options 对象配置一些额外的选项。在这个示例中，我们为 svgo 配置了一些插件。SVGO 是一个 SVG 优化工具，它可以帮助我们优化 SVG 文件。
在 Vue 中使用 SVG
当我们将 SVG 文件通过 @marlow/vue-svg-loader 转化为 Vue 组件后，我们就可以在 Vue 应用中以组件形式使用它们了。
以下是一个使用 SVG 组件的示例：
-- -------------------- ---- -------
----------
-----
------ --
------
-----------
--------
------ ----- ---- ---------------
------ ------- -
----- --------------
----------- -
------
--
--
---------注意，我们需要将 SVG 文件 import 到 Vue 组件中，然后通过组件标签来使用它（上述示例中的组件标签为 <MySvg />）。
总结
通过 @marlow/vue-svg-loader，我们可以方便地将 SVG 文件转化为 Vue 组件，从而获得更好的可定制性。
在使用过程中，我们需要注意配置 webpack，并按照组件方式使用转化后的 SVG 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005599381e8991b448d729a