Tailwind CSS 是一个现代化的 CSS 框架，它的特点是使用简单和高度定制化。其中一项特性是可以使用自定义的 SVG 图标，因而在这篇文章中，我们将深入探讨如何在 Tailwind 中使用自定义的 SVG 图标。
添加自定义的 SVG 图标
首先，我们需要在项目中添加我们自定义的 SVG 图标。一种添加 SVG 图标的方式是使用外部的图标库，但是这篇文章将着眼于使用本地 SVG 文件。
为了添加 SVG 文件，我们可以使用一个叫做 svg-sprite-loader 的 webpack 加载器，这个加载器可以将每一个 SVG 文件转化为一个符号（symbol）。这使得我们能够在不创建多个图标文件的情况下，在多个地方使用同一个符号。
以下是使用 svg-sprite-loader 的 webpack 配置：
-
----- ---------
---- -
--------------------
----------------------
-
-这个配置告诉 webpack 在遇到 .svg 文件时，使用 svg-sprite-loader 和 svg-transform-loader 对 SVG 文件进行转化。
在 Tailwind 中使用符号（symbol）
当我们创建好使用 svg-sprite-loader 转化后的 SVG 符号文件后，我们就可以在 Tailwind 中使用它们了。
要使用 SVG 图标，我们首先需要创建一个 CSS 类来引用 SVG 符号。例如，假设我们创建了一个叫做 icon-star 的符号（symbol），我们可以在自己的 CSS 文件中添加以下代码：
---------- - -------- ------------- ------- ---- ------ ---- --------------- --------- ------------------ ---------- ---------------- -------- -
这个 CSS 类会将 SVG 图标转换为一个内联的块元素，并定义其尺寸的大小。
现在，我们可以在 Tailwind 中使用它们了。我们可以添加以下 CSS 类到我们的 HTML 中：
---- ---------- ----- ---- ------------------------------ ------
其中，h-6 w-6 是 Tailwind 中预定义的类，用于定义 SVG 图标的尺寸。我们通过使用 use 标签将 SVG 文件中的符号引用到我们的 HTML 中。
现在，我们已经成功地将 SVG 图标添加到 Tailwind 中，并可以在 HTML 中使用它们了。
创建多个尺寸的 SVG 图标
在实际项目中，有时候我们需要使用多尺寸的 SVG 图标。虽然 Tailwind 中可以使用 h-* 和 w-* 等预定义的尺寸类来调整 SVG 图标的大小，但这些类只能改变它们的高度和宽度。
对于不同的大小，需要在 SVG 文件中定义多个符号。这个过程最好通过一个自动化的工具来完成。想要实现这个工具，我们可以使用一个叫做 svg-baker 的 Node.js 库。
以下是使用 svg-baker 来生成不同尺寸的 SVG 图标的简单示例：
----- -------- - --------------------- ----- ------ - --- ----------- ------------- -------- ------------- ------- ------- ---------------- --- ------ --- ------------- -------- ------------- ------- ------- ---------------- --- ------------- --- -------------------------------
这个示例代码封装了 svg-baker 库的 bake 方法，通过传递 SVG 内容和 ID 来创建多个符号。我们可以通过 toString 方法把所有的 SVG 符号生成成一个字符串，再将其添加到 CSS 中。
现在，我们已经成功地为我们的 Tailwind 项目创建了多个不同尺寸的 SVG 图片。
结论
在这篇文章中，我们已经深入学习了如何在 Tailwind 中使用自定义的 SVG 图像。我们学习了如何在项目中添加自定义的 SVG 图像、 使用 svg-sprite-loader 和 Tailwind CSS 中定义的 CSS 来处理 SVG 图像、以及使用 svg-baker 自动生成多尺寸 SVG 图像，并将它们添加到 CSS 中。
如果你正在尝试使用自定义的 SVG 图像，在 Tailwind 项目中，那么我们相信这篇文章绝对会帮助到你。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673300be0bc820c5823ff8b6