如何使用 Tailwind CSS 调整 SVG 图标的大小？

SVG 代表Scalable Vector Graphics ，是一种基于 XML（可编辑）的矢量图像格式。 SVG 常用于浏览器中的图标、动画、交互式图表、图形和其他动态图形。由于它是基于 XML 的，因此您可以使用 Tailwind 轻松调整 SVG 图标的大小。

方法：你可以通过改变图标的高度和宽度或者改变SVG的viewBox属性值来简单的自定义SVG的类。

句法：

注意： viewBox属性定义了 SVG 视口的位置和尺寸。 viewBox 属性的值是四个数字的列表，min-x、min-y、width 和 height。所以 viewBox 并没有设置 SVG 的大小，它只是决定了我们将通过哪个框架或窗口看到 SVG。

示例 1：使用viewBox属性调整 SVG 图标的大小。

HTML

  

    

  

    

        GeeksforGeeks
    
  
    Tailwind CSS Resize SVG icon
      
    

  
        
        
  
        
        
    

  

输出：

示例 2：简单地更改图标类的宽度和高度。

HTML

  

    

  

    

        GeeksforGeeks
    
    Tailwind CSS SVG
    

  
        
        
  
        
    

  

输出：