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

SVG 代表可缩放矢量图形，是一种基于 XML(可编辑)的矢量图像格式。 SVG 通常用于浏览器中的图标、动画、交互式图表、图形和其他动态图形。由于它基于 XML，因此您可以使用 Tailwind 轻松编辑或更改 SVG 图标颜色。

方法：您可以通过在图标中添加文本颜色或背景颜色来简单地自定义 SVG 的类，但在此过程中，您必须谨慎使用用于设置 SVG 样式的实用程序，例如 Tailwind CSS 中的填充和笔触。

句法：

注意： viewBox属性定义了 SVG 视口的位置和尺寸。 viewBox 属性的值是一个包含四个数字的列表： min-x、min-y、width和height 。因此 viewBox 不会设置 SVG 的大小，它只是确定我们将看到 SVG 的框架或窗口。

示例 1：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Stroke Class
    

        
      
        
        
      
      
  

  

输出：

示例 2：使用填充和描边实用程序设计图标样式。

• fill-current用于将 SVG 的填充颜色设置为当前文本颜色。通过将此类与现有文本颜色实用程序相结合，可以轻松设置元素的填充颜色。
• stroke-current用于将 SVG 的笔触颜色设置为当前文本颜色。通过将此类与现有文本颜色实用程序相结合，可以轻松设置元素的笔触颜色。
• stroke-width用于设置 SVG 的笔触宽度。

句法：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS SVG
    

        
      
        
        
      
      
  
     
  

  

输出：