octothorpe 是一个可以让你在 HTML 中引入 SVG 的 npm 包。它可以帮助你优化你的项目并且让你的 SVG 图标更加易于管理。
什么是 octothorpe？
octothorpe 是一个小型但是非常有用的 npm 包。它可以让你在 HTML 中引入 SVG 图标，这样就避免了将图标转换为 PNG 或者 JPEG 格式。因为在大多数情况下，SVG 格式的图标比 PNG 或者 JPEG 格式的更加小巧且质量更好。
另外，通过使用 octothorpe，你可以在 HTML 中一次引入所有的 SVG 图标，然后通过代码的方式在页面中展示它们。这意味着你可以更加灵活地使用你的图标，并且你可以避免在项目中多次使用相同的图标。
安装 octothorpe
要在你的项目中使用 octothorpe，你需要先安装它。你可以通过 npm 安装 octothorpe：
npm install octothorpe --save
这段代码会从 npm 库中下载 octothorpe 并且将它保存在你的项目中。一旦你的项目安装了 octothorpe，你就可以在你的 HTML 中使用它了。
在 HTML 中使用 octothorpe
要在 HTML 中使用 octothorpe，你需要先指定你的 SVG 文件的目录。你可以将你的 SVG 文件放在任何地方，但是最好将它们放在一个单独的目录下。例如，我们可以将我们的 SVG 文件放在 ./icons 目录下：
-- -------------------- ---- -------
-- ----------
--------- -----
------
------
--------- ---------------
------- -----------------------------------------------------
--------
-- -- --- --
------------------------------
---------
-------
------
---- -------- ---
---- ------------ -------------------------
-------
-------在这个例子中，我们在 head 标签中引入了 octothorpe，然后在 JavaScript 中指定了我们的 SVG 文件的目录。接下来，我们可以在 HTML 中使用 div 标签来展示我们的图标。我们使用了一个自定义的属性 data-icon 来指定图标的名称。在实际的项目中，你可以根据你的需求来使用不同的 HTML 标签来展示你的图标。
在 CSS 中使用 octothorpe
要在 CSS 中使用 octothorpe，你需要定义一个 CSS 类并且使用 :before 伪元素来展示你的图标。例如，下面的代码定义了一个名为 icon 的 CSS 类，并且使用 :before 伪元素来展示 data-icon 属性所指定的图标。
-- -------------------- ---- ------- -- ---------- -- ------------- - -------- ------------- -------- --- ------- ----- ------ ----- ------------------ ---------- ---------------- -------- -
在这个例子中，我们定义了一个 icon 类，并且使用 :before 伪元素来展示图标。我们设置了 display: inline-block; 让图标能够显示在行内，设置了 content: ''; 来生成伪元素，并且设置了 height，width 来定义图标的大小。最后，我们使用了 background-repeat: no-repeat; 和 background-size: contain; 让图标在容器中居中，并且不会进行重复。
接下来，我们可以通过给 div 标签添加 icon 类来展示图标。
<!-- index.html --> <div class="icon" data-icon="github"></div>
在这个例子中，我们给 div 标签添加了 icon 类，并且使用 data-icon 属性来指定图标的名称。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
-- ----------
--------- -----
------
------
--------- ---------------
------- -----------------------------------------------------
----- ---------------- ------------------
--------
-- -- --- --
------------------------------
---------
-------
------
---- ------------ -------------------------
---- ------------ ---------------------------
---- ------------ --------------------------
-------
--------- -------------------- ---- ------- -- ---------- -- ----- - -------- ------------- ------- ----- ------ ----- ------------- ----- - ------------- - -------- ------------- -------- --- ------- ----- ------ ----- ------------------ ---------- ---------------- -------- - --------------------------------- - ----------------- -------------------------------------------- ------------------------------------ ----------- - -- -------------- ------- ---- -- - - ----- ---------------------------------------------------------------------------------- ---- - - - -------- --- ----- ---------- ---- - - - ---------------------------------- ---- - - - ----------------------- - - ----- ---------- ---- - - - - -------- ------ ---------- - ----- -------- ---- - - - -- ----- ------- ------- -------- ---- - - - -- --------- ------------- -- - - - -- --------------------- - ----------------------------------- - ----------------- -------------------------------------------- ---------------------------------- ----------- ---------- - -- ------------- -------------- ------ ------------------- ----------- ----------- ------- --------------------- --- - - - -------- - - - - - ----- --------------------------------------- -- - ----- ------- ----- ----- --- - ------ -------------------- - ------ -------------------- -------- ------ - -- ------ ----------------- - ---------------------------------- - ----------------- -------------------------------------------- ---------------------------------- ---------- - -- ------------- ------------- --------- ---------- --------- ----------- ----------- ----- - - ----------------------- ------- --- - ----- ------------- ---- - - -------------------------------- - ------- ------------ ---- - - --------------------- ---- - - - ------- ---- ---- - - ---------------- -------------------- ---- - - - ---- ----------------------------------- ---- ------------- ---- - - - ---- --------- ---- - - ------ -------- ---------------------- ----- - - - ---- ------- ----- ----- ----- ----- ------ ----------------- -
在这个例子中，我们引入了 octothorpe 和样式表。在 JavaScript 中，我们指定了 SVG 文件的目录。在 HTML 中，我们使用了 div 标签来展示图标，并且使用 data-icon 属性来指定图标的名称。在 CSS 中，我们定义了一个 icon 类来展示图标，并且使用相应的伪元素来设置图标的样式和展示方式。最后，我们使用了不同的 background-image 属性来指定不同的图标。
结论
通过使用 octothorpe，你可以优化你的项目并且让你的图标更加易于管理。它使你可以在 HTML 中一次性地引入所有的 SVG 图标，并且通过代码的方式进行展示。在 CSS 中，你可以定义一个图标类来展示你的图标。通过使用 octothorpe，你可以避免在项目中多次使用相同的图标，并且使用SVG格式的图标可以展示出更好的图形效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9e3d1de16d83a670a6