SVG 是一种矢量图形格式，它具有可伸缩性、清晰度高、可编辑性强等优点。在前端开发中，我们经常使用 SVG 做图标或其他图形的展示。但是在一些特定场景下，例如服务器端渲染或静态网站生成等，需要将 SVG 转换成可嵌入 HTML 的形式。这时我们可以使用 npm 包 svg-ssr。
svg-ssr 包提供了将 SVG 转换为嵌入 HTML 中使用的方法，并且支持了 webpack、rollup、browserify 等常见的打包工具。接下来，我们将详细介绍如何安装和使用 svg-ssr 包。
安装
在 npm 包管理器中执行以下命令进行安装：
npm install svg-ssr --save-dev
安装完成之后，我们需要在 webpack 的配置文件中添加对 svg-ssr 的规则。假如我们使用的是 webpack 5.x 版本，则可以添加如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- --------------
--
-
------- --------------
-------- -
----- ---------------------
-
-
-
-
-
-
-使用
svg-ssr 支持两种使用方式，一种是普通的 JavaScript 引入，另一种是在 Vue 组件中使用。
JavaScript 引入
在 JavaScript 中使用 svg-ssr 很简单，我们可以像下面这样引入一个 SVG 文件：
-- -------------------- ---- -------
------ ------ ---- -----------------------
----- ---- - -
-----
-- ---- --- ---------
------
--
----------------------- - -----在这个例子中，我们将一个 SVG 文件引入到了 JavaScript 文件中，并直接在 HTML 中使用。这种用法适用于普通静态网页，例如一个简单的单页应用等。
Vue 组件
在 Vue 组件中使用 svg-ssr 更加方便。我们可以用一个名为 "SvgIcon" 的组件包装 SVG 文件，在其他组件中引用 "SvgIcon" 组件来使用。
首先，我们需要在项目中创建 "SvgIcon" 组件。在组件中引入 svg-ssr 并实现 SVG 转 HTML 的方法，示例如下：
-- -------------------- ---- -------
----------
----- ------------- --
-----------
--------
------ - -------- - ---- ----------
------ ------- -
----------- ---
------ -
----- ------
--
--------- -
------ -
----- --- - -------------------------------------------
----- ---- - ----------------------
------ -----
-
--
-------- ---
--------- --
--
---------在这个组件中，我们将 receivedProps 作为传入的 SVG 文件名，通过 require 方法将 SVG 文件引入。然后，我们使用 svg2html 方法将 SVG 转换为 HTML 格式。最后，我们将 HTML 代码展示在页面上。
在其他组件中使用 "SvgIcon" 组件就可以了，示例如下：
-- -------------------- ---- -------
----------
-----
---- -- -- ----- -------- -------------- --
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ ---
-
--
---------在这个组件中，我们使用了 "SvgIcon" 组件，并传入了需要展示的 SVG 文件名。然后，"SvgIcon" 组件通过引用 SVG 文件并将其转换为 HTML 来渲染展示。
总结
svg-ssr 是一款非常实用的 npm 包，它支持将 SVG 转换为 HTML 格式，方便在服务器端渲染或静态网站生成等特殊场景下使用。上面我们介绍了如何安装和使用 svg-ssr，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de020