时间戳

首页 > 解决方案 > Colorize transparent part of SVG icons

css - Colorize transparent part of SVG icons

问题描述

I want to colorize a transparent part of a svg icon from font awesome. I am using Vue Fort-Awesome package.

Here as you see inner part of icon is getting the background image of my main div. However I don't want those part to be transparent. Do you have any tricky solution for it? I know this question can be very easy but I couldn't find how to search for it on google.

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


Those are technologies that I use but simple css trick can be acceptable too.

Tailwind
Vue3
FortAwesome

标签： csssvgfont-awesometailwind-css

解决方案

您可以通过更改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>

推荐阅读