如何使用 Tailwind CSS 更改 svg 图标颜色？

在使用 Tailwind CSS 框架的过程中，可能会遇到需要更改 svg 图标颜色的情况，本文将介绍如何使用 Tailwind CSS 更改 svg 图标颜色。

使用 text- 颜色类名

在 Tailwind CSS 中，可以使用 text- 开头的颜色类名来更改 svg 图标的颜色。例如，如果想将 svg 图标的颜色改为蓝色，则可以添加 text-blue-500 类名。

<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 3m0 0l3 3m-3-3l18 18" />
</svg>

使用 fill-current 类名

除了使用 text- 颜色类名外，还可以使用 fill-current 类名来更改 svg 图标的填充颜色。这种方法比上一种方法使用更简单，只需要添加 fill-current 类名，并且不需要为其指定具体的颜色。

<svg class="w-6 h-6 fill-current" viewBox="0 0 20 20">
  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
  <path fill-rule="evenodd" d="M9 3a1 1 0 012 0v3a1 1 0 11-2 0V3zm5.292 1.5A1.5 1.5 0 0010.5 6h-1a1.5 1.5 0 00-2.792.5L5.618 9.559A1.5 1.5 0 005 10.732V11a2 2 0 002 2h6a2 2 0 002-2v-.268a1.5 1.5 0 00-.618-1.173l-1.588-1.559z" clip-rule="evenodd" />
  <path d="M10 13a6 6 0 110-12 6 6 0 010 12z" />
</svg>

自定义颜色

如果想自定义 svg 图标的颜色，可以在 tailwind.config.js 文件中自定义颜色，并在 html 文件中使用自定义颜色来更改 svg 图标的颜色。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'icon-color': '#F9A826',
      }
    }
  }
}

<svg class="w-6 h-6 text-icon-color" viewBox="0 0 20 20">
  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
  <path fill-rule="evenodd" d="M9 3a1 1 0 012 0v3a1 1 0 11-2 0V3zm5.292 1.5A1.5 1.5 0 0010.5 6h-1a1.5 1.5 0 00-2.792.5L5.618 9.559A1.5 1.5 0 005 10.732V11a2 2 0 002 2h6a2 2 0 002-2v-.268a1.5 1.5 0 00-.618-1.173l-1.588-1.559z" clip-rule="evenodd" />
  <path d="M10 13a6 6 0 110-12 6 6 0 010 12z" />
</svg>

以上就是如何使用 Tailwind CSS 更改 svg 图标颜色的方法介绍。