如何使用Tailwind修改SVG图标颜色

Question

如何使用Tailwind修改SVG图标颜色

39

我正在使用TailwindCSS，并想要更改svg的颜色。如果没有Tailwind，此问题之前已经被问过这里，在2020年这个应该是一个好答案，但是Tailwind不支持这些过滤器。文档中有一个指南如何使用svg图标，但是此教程适用于没有文件的工作，只有纯文本路径。

我下载了svg文件，并将路径指定为图像的src标记的svg。以下示例显示我的问题，我希望图标的背景为红色，图标的颜色为蓝色。不幸的是，我无法更改图标颜色。

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

当下载SVG图标并通过链接资产路径直接使用它们时，正确的工作流程是什么？我想要实现的只是像这样：

下载SVG图标到本地，将其放入项目文件夹中，然后使用相对路径链接它们。

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

如何将图标颜色设置为自定义的Tailwind颜色，例如red-500。这样每当我想要更改图标颜色时，我只需修改颜色类即可。

有人知道如何做吗？

- Question3r

除非SVG的设计完全符合您想要的外观，否则没有使用SVG作为图像的工作流程。为什么不使用内联SVG呢？ - JHeth

抱歉，你的意思是什么？我尝试了这个 https://jsfiddle.net/e0o8ctmg/ - Question3r

这将会很有帮助 https://tailwindcss.com/docs/fill - Parth Developer

5个回答

8

简单来说，使用text-<颜色>和fill-current。

<svg class="h-16 w-16 rounded-full bg-cyan-400 fill-current text-white" viewBox="0 0 60 60">
  <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z" />
</svg>

输出：

（备注：该文本已经是中文，无需翻译）

- Agni Gari

1

为什么只用 fill-color-100 不能正常工作？为什么我需要使用 text-color 而不是它？ - Flamingo

@Flamingo 因为图标（以及装饰物）通常与文本一起使用，并且预期使用与周围文本相同的颜色，所以将描边或填充默认设置为文本颜色会更方便。 "current" 比 Tailwind 更大，因为它是 CSS 本身的一部分 - https://css-tricks.com/currentcolor/ - Chris Hayes

0

我不喜欢内联SVG的想法，可以在被接受的答案的评论部分看到。所以我找到了一个替代方案，适用于使用React的人。这个想法是为每个.svg文件生成一个React组件：

安装SVGR命令行。
生成React组件，例如：npx @svgr/cli --no-dimensions --typescript --out-dir src/components/icons_svg -- public/icons_svg。
从生成的代码中删除所有fill条目：sed -i '' -e 's/fill=".*"//g' $(find src/components/icons_svg -type f -not -path "*path/to/your/colored/MySvg.tsx*")。 MySvg.tsx可以是一个不应该用颜色填充的组件，因为它代表一个已经有颜色的svg。
使用生成的组件：<SvgLogo className="h-4 w-4 fill-red" />。

- Oleg Yablokov

-1

如果您正在使用 Heroicons，请尝试使用 stroke-cyan-500 和 fill-cyan-300 标签。

参见：

https://tailwindcss.com/docs/fill

https://tailwindcss.com/docs/stroke

- Dejan S

-1

改变SVG颜色的简单方法是在SVG标签上设置class="fill-current"，然后像文本一样设置颜色，就像这样：

我设置了text-blue-400

  //bell icon
  <svg viewBox="0 0 46 48" class="fill-current text-blue-400" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 19V32.5335C4.00017 32.8383 3.9145 33.1371 3.75292 33.3956L0.912672 37.94C0.0801118 39.2721 1.0378 41 2.60867 41H43.3917C44.9625 41 45.9202 39.2721 45.0877 37.94L42.2474 33.3956C42.0858 33.1371 42.0002 32.8383 42.0002 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 0ZM23.0002 48C20.2388 48 18.0002 45.7614 18.0002 43H28.0002C28.0002 45.7614 25.7616 48 23.0002 48Z"></path>
  </svg>

- Mohammadreza Khalilikhorram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JHeth · Accepted Answer

将SVG添加到您的Tailwind项目的工作流应使用内联SVG完成。

Tailwind CSS的创建者Adam Watham制作了一个有关在Tailwind中使用内联SVG的视频。在视频中，他展示了一种用于准备未优化的SVG以供Tailwind项目使用的工作流程。以下是步骤及一个额外的步骤，他没有提到：

将SVG文件拖放或将SVG标记粘贴到SVGOMG的优化器中。
复制SVGOMG提供的标记并粘贴到您的项目中。
删除任何填充或描边属性，以便Tailwind可以使用类修改这些属性（视频中未显示）。
删除任何XMLNS属性或XML标记，这些对于内联SVG不需要。
添加Tailwind类。

如果您正在使用基于组件的框架，则建议您还应提取图标为可在整个应用程序中重用的组件。

此方法的好处：

完全控制SVG图标的大小和颜色
加载速度更快，因为图标是HTML的一部分

以下是基于您在评论中分享的Fiddle的示例。我通过SVGOMG运行了SVG，并删除了填充属性，以便Tailwind可以控制它。

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
    <path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>

<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
    <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>