SVG 是一种基于 XML 的图像格式，它可以以矢量图的形式描述出各种复杂的图像。在前端开发中，SVG 很常见且广泛应用，然而，如果想要在 TailwindCSS 中使用 SVG，可能会有些不知所措。本文将详细介绍如何在 TailwindCSS 中使用 SVG，并包含示例代码。
1. 加载 SVG 文件
在 TailwindCSS 中使用 SVG，首先需要将 SVG 文件加载到项目中。一种简单的方式是使用 @svg-loader，它可以将 SVG 文件转换为使用 symbol 标签的文件。
安装 svg-loader：
npm install --save-dev @svgr/webpack
webpack.config.js 中配置 svg loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ----------------
-------- -
----------- -
-------- -
- ----------- ----- --
- --------------- ----- --
- ------------------ ----- --
- -------------- ----- --
- ------------------------ ----- --
- -------------------- ----- --
- ----------------- ----- --
- --------------- ----- --
- -------------- ----- -
-
-
--
--
-------------
--
--
--
--
--2. 配置 TailwindCSS
当 SVG 文件加载完成后，需要根据 TailwindCSS 配置文件的要求进行相应的配置。
首先，在 tailwind.config.js 中添加 theme 属性：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
---- -
----- ---------------
------ ------
------- ------
--
--
--
--fill 属性的值设置为 currentColor，表示使用 SVG 的当前颜色。width 属性和 height 属性的值均为 1em，表示 SVG 的宽度和高度与当前字体大小一致。
接着，在 tailwind.config.js 中的 variants 数组中添加 fill 和 stroke 变体：
module.exports = {
variants: {
extend: {
fill: ['hover', 'focus'],
stroke: ['hover', 'focus'],
},
},
};这样，在使用 SVG 的 fill 属性和 stroke 属性时，可以对这两个属性进行颜色变化。
3. 使用 SVG
SVG 加载和配置完成后，即可在 TailwindCSS 中使用 SVG。使用 SVG 需要将 SVG 文件嵌入到 HTML 代码中，这里介绍两种嵌入方式。
3.1. 使用 SVG 标签
<svg class="w-6 h-6"> <use xlink:href="/path/to/svg.svg#icon-name"></use> </svg>
其中，xlink:href 属性的值表示 SVG 文件的路径，#icon-name 表示 SVG 文件中对应的图标名称。class 属性为 TailwindCSS 的类名，表示 SVG 的大小。
3.2. 使用组件
为了方便地在项目中使用 SVG，可以将 SVG 文件转换为组件。在 Vue 项目中，使用 vue-svg-loader：
安装 vue-svg-loader：
npm i --save-dev vue-svg-loader
在 webpack.config.js 中配置 vue-svg-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-------------
-
------- -----------------
-------- -
-- -------- ----------------------------------- -------
----- -
-------- -- -------------- ---- -- - --------------- ---- ---
--
--
--
--
--
--
--
--在 Vue 文件中使用 SVG 组件：
-- -------------------- ---- -------
----------
--------- --------------- ---------- ---- --
-----------
--------
------ ------- ---- ----------------
------ ------- -
----- ------------
----------- -
--------
--
--
---------其中，在 SvgIcon.vue 文件中，使用 custom events 传递子组件的参数：
<svg :class="`w-4 h-4 ${styles}`" @click="$emit('click')">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
:xlink:href="`#icon-${name}`"
class="icon"
/>
</svg>将 #icon-${name} 作为子组件的参数，在父组件中通过 name prop 传递，如：
<svg-icon name="search" class="w-4 h-4" @click="handleSearch" />
在这里，search 就是 SVG 图标名称。
4. 总结
本文介绍了如何在 TailwindCSS 中使用 SVG，包括 SVG 文件的加载、在 TailwindCSS 中的配置和使用 SVG 的两种方式。通过阅读本文，您可以深入了解如何在 TailwindCSS 中使用 SVG，并能在自己的项目中实现快速高效地使用 SVG 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f97ddadd4f0e0ff826f35