如何在 TailwindCSS 中使用 SVG？-JavaScript中文网-JavaScript教程资源分享门户

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：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "@svgr/webpack",
            options: {
              svgoConfig: {
                plugins: [
                  { cleanupIDs: false },
                  { collapseGroups: false },
                  { removeUselessDefs: false },
                  { removeViewBox: false },
                  { cleanupEnableBackground: false },
                  { convertStyleToAttrs: false },
                  { convertTransform: false },
                  { collapseGroups: false },
                  { convertColors: false }
                ]
              }
            },
          },
          'url-loader',
        ],
      },
    ],
  },
};

2. 配置 TailwindCSS

当 SVG 文件加载完成后，需要根据 TailwindCSS 配置文件的要求进行相应的配置。

首先，在 tailwind.config.js 中添加 theme 属性：

module.exports = {
  theme: {
    extend: {
      svg: {
        fill: 'currentColor',
        width: '1em',
        height: '1em',
      },
    },
  },
};

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：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'vue-loader',
          {
            loader: 'vue-svg-loader',
            options: {
              // optional [svgo](https://github.com/svg/svgo) options
              svgo: {
                plugins: [{ removeDoctype: true }, { removeComments: true }],
              },
            },
          },
        ],
      },
    ],
  },
};

在 Vue 文件中使用 SVG 组件：

<template>
  <svg-icon name="app-logo" class="w-6 h-6" />
</template>

<script>
import SvgIcon from './SvgIcon.vue';
export default {
  name: 'AppHeader',
  components: {
    SvgIcon,
  },
};
</script>

其中，在 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

如何在 TailwindCSS 中使用 SVG？