TailwindCSS SVG图标或图形适应不同的主题和模式

11 min read

在SVG中，fill和stroke是两个重要的属性。fill负责填充图形的内部颜色，而stroke则负责图形轮廓（即边框）的颜色。TailwindCSS提供了一种方便的方法来控制这两个属性。

  1. fill-current: 当您添加fill-current类到SVG元素上时，fill属性将设置为currentColor。这意味着SVG内部的填充颜色将继承其父元素的文本颜色。这非常有用，尤其是当您想要根据不同模式（如暗黑模式）动态更改SVG颜色时。

    示例：

    <svg className="fill-current text-blue-500 dark:text-blue-300">
    <!-- SVG content -->
</svg>

  2. stroke-current: 类似地，当您添加stroke-current类到SVG元素上时，stroke属性将设置为currentColor。这意味着SVG的轮廓颜色将继承其父元素的文本颜色。

    示例：

    <svg className="stroke-current text-red-500 dark:text-red-300">
    <!-- SVG content -->
</svg>

在这两种情况下，您都可以使用TailwindCSS的文本颜色实用程序（如text-blue-500、dark:text-blue-300等）来控制SVG的fill或stroke颜色。这为您提供了一种高度灵活和可定制的方式来控制SVG图标或图形的外观。

结合暗黑模式，您可以如下所示使用这些类：

  • 使用dark:text-white和dark:stroke-white来在暗黑模式下设置白色的fill和stroke。
  • 使用text-black和stroke-black来在普通模式下设置黑色的fill和stroke。