什么是 posthtml-svg-mode?
posthtml-svg-mode 是一款 npm 包，提供一种用于处理 SVG 的 posthtml 插件。
posthtml 是一种基于插件的 HTML 处理工具，可以进行模板引擎的预编译，CSS 代码的内联，代码压缩等功能。
而 posthtml-svg-mode 则是 posthtml 的一个插件，主要用于解析 SVG 文件，生成可直接插入 HTML 页面中的 SVG 图像。
安装和使用
posthtml-svg-mode 可以通过 npm 进行安装，支持全局安装和本地安装两种方式：
# 全局安装 npm install posthtml-svg-mode -g # 本地安装 npm install posthtml-svg-mode --save-dev
安装好后，在项目根目录下创建一个 posthtml.config.js 的配置文件，并在其中使用 posthtml-svg-mode 插件：
// posthtml.config.js
const postSvgMode = require('posthtml-svg-mode');
module.exports = {
plugins: [
postSvgMode()
]
}以上配置会自动解析当前目录下所有的 SVG 文件，并生成对应的 HTML 代码。
如果需要对某个 SVG 文件进行单独处理，可以在 SVG 标签中添加 class='svg-inline' 属性，然后在 posthtml.config.js 文件中使用 class ID 进行选择：
-- -------------------- ---- -------
-- ------------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------
--- -------------
--
-
-示例代码
以下是一个使用 posthtml-svg-mode 插件的示例代码：
<!-- test.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-inline"> <path fill="#000" d="M11.5 0C5.5 0 .5 5 0 11v.5c0 1.4.1 2.7.4 4 .8 3.9 3.9 7.1 7.8 7.9 1.2.2 2.4.3 3.6.3 1.2 0 2.4-.1 3.6-.3 3.9-.8 7-4 7.8-7.9.3-1.3.4-2.6.4-4v-.5c-.5-6-5.5-11-11.5-11zm6 7.5C16.2 5 13.5 2.3 11 2.5c-2.5-.2-5.2 2.5-6 6-.1.4-.1.9-.1 1.3v.5c0 .2 0 .4.1.6.6 2.6 2.6 4.6 5.2 5.2.2 0 .5 0 .7-.1 2-.4 3.6-2 4-4 .1-.4.1-.8.1-1.3v-.5c0-.4 0-.9-.1-1.3zm-6.7 1.8c-.2-.3-.3-.6-.2-.9.2-.6.7-1 1.3-.9a1 1 0 01.9 1.2c-.2.6-.8 1-1.4.9-.1-.1-.2-.2-.3-.3zm6.9-.3c0-.4-.3-.7-.7-.7s-.7.3-.7.7c0 .2 0 .3.1.5.1.2.2.3.3.3s.3-.1.4-.2c.1-.1.2-.3.2-.4z"/> </svg>
-- -------------------- ---- -------
-- ------------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------
--- -------------
--
-
--- -------------------- ---- -------
---- ---------- ---
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
--------- ----------------- ----------
-------
------
---- ------------------
------ ----------------- -------
------ --- -------
---- -- --- ------ ---- -- ---
---- ----------------------
-- ------- ---------- --
------
------
-------
-------通过以上代码，我们将 test.svg 文件引入到了 index.html 中，并使用 posthtml-svg-mode 插件对其进行处理，生成了如下 HTML 代码：
-- -------------------- ---- -------
---- ------------------
------ ----------------- -------
------ --- -------
---- ---- --- -- ---
---- ----------------------
---- ---------------------------------- ---------- - -- --- -------------------
----- ----------- -------- ----- - -- - - ------- ----- ----- - -- --- --- --- --- --- ----- ----- ----- --- - ------ ------ ------ --- --------------------------------------------------- -------- - ---- --- -- --------------- ----- -------------- -------- -- - -------- --- --- --- --- ----- - -- - ----- ---- ----- --- ------------------------- ----------------- ------------------------------- -------- - - ---- ------------ --------------------------------------------------------------- -- - -------------------------------------------------
------
------
------以上代码中，test.svg 文件被转换成了一个包含 SVG 代码的 div 元素，可以直接插入 HTML 页面中使用。而且，我们可以在其他地方再次使用这个 div，避免了反复生成 SVG 图像代码的重复劳动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc7c1b5cbfe1ea06122b2