为 SVG 图标的透明部分着色答案

【问题标题】：Colorize transparent part of SVG icons为 SVG 图标的透明部分着色
【发布时间】：2021-10-18 09:16:25
【问题描述】：

我想用 font awesome 为 svg 图标的透明部分着色。我正在使用 Vue Fort-Awesome 包。

在这里，您看到图标的内部部分正在获取我的主 div 的背景图像。但是我不希望这些部分是透明的。你有什么棘手的解决方案吗？我知道这个问题可能很简单，但我找不到如何在 google 上搜索它。

<v-icon
  icon="minus-circle"
  class="w-6 h-6 rounded-full text-red-500"
/>

这些是我使用的技术，但简单的 css 技巧也可以接受。

Tailwind
Vue3
太棒了

【问题讨论】：

您是否尝试为图标添加背景颜色？喜欢class="w-6 h-6 rounded-full text-red-500 bg-white"

标签： css svg font-awesome tailwind-css

【解决方案1】：

您可以通过更改fill 部分中的十六进制值来更改减号或圆圈的颜色。对于其他图标，您可以通过编辑 svg 文件来更改颜色。

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="#00970F"/>
<rect x="39" y="88" width="123" height="25" rx="10" fill="#FA00FF"/>
</svg>

【讨论】：