TailwindCSS：SVG 图标无法正确调整大小

Question

在这个例子中，我一直在尝试调整图标的大小。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100" width="100px" height="100px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>

但是，无论我尝试什么，我都无法调整 svg 的大小。我究竟做错了什么？

原文由 sanders 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要调整图标大小，请调整 viewBox

 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>

<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">

    <svg
      class="flex-no-shrink fill-current"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 80 80"
      width="100px"
      height="100px"
    >
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>

    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>

原文由 Alexandr_TT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 TailwindCSS 中更改 SVG 宽度和高度

Adam Wathan（TailwindCSS 创建者）处理 SVG 的解决方案在此处的视频中展示。 他的解决方案如下：

更改 SVG 元素的步骤

1. 删除宽度和高度属性
2. 添加 TailwindCSS 宽度和高度类

有问题的 SVG 示例

我在问题中采用了 SVG，并将其与 SVG 配对并缩写了路径。然后进行上述更改。

前

<svg class="flex-no-shrink fill-current"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     width="100px" height="100px">  <!-- 1. Remove width and height attributes -->
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>

后

   <!--      \/---- 2. Add tailwindcss width and height classes -->
<svg class="h-4 w-4 flex-no-shrink fill-current"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>

他没有提到视图框，只是说如果你保持正方形会更容易。

原文由 notapatch 发布，翻译遵循 CC BY-SA 4.0 许可协议