Vue 3 中使用 CSS 设置 Iconify 图标路径颜色：常见问题及解决方案

使用 CSS 在 Vue 3 中设置 Iconify 图标路径颜色

问题：默认的 currentColor 覆盖

在 Vue 3 中，使用 Iconify 库可以轻松添加自定义颜色图标。然而，默认情况下，图标路径被设置为 currentColor，这意味着它会采用父元素的文本颜色，从而覆盖通过 CSS 设置的颜色。

解决方案：覆盖 currentColor

要通过 CSS 设置图标路径颜色，你需要覆盖 currentColor。这里有几种方法：

• 使用 !important 声明： 在 CSS 选择器中嵌套 !important 规则：

path {
  color: red !important;
  fill: red !important;
}

• 使用 fill 属性： 直接使用 fill 属性设置路径颜色：

path {
  fill: red;
}

• 覆盖父元素颜色： 通过覆盖父元素的文本颜色来更改路径颜色：

a {
  color: black;
}

示例代码

修改后的代码演示了如何通过 CSS 设置 Iconify 图标路径颜色：

<script setup>
  import { IconInstagram, IconGithub, IconLinkedinIn } from '@iconify-prerendered/vue-fa-brands';
</script>

<template>
  <a href="" class="flex items-center justify-center">
    <IconInstagram class="h-6 w-6" />
  </a>
</template>

<style scoped>
  path {
    fill: red !important;
  }
</style>

结论

通过 CSS 在 Vue 3 中设置 Iconify 图标路径颜色需要覆盖默认的 currentColor 设置。使用 !important 规则、fill 属性或覆盖父元素颜色都可以实现这一目标。

常见问题解答

1. 为什么 !important 之前不起作用？
   !important 需要嵌套在 CSS 选择器中才能生效。

2. 为什么使用 fill 属性不起作用？
   fill 属性可能被其他样式覆盖，请确保其具有更高的优先级。

3. 我可以覆盖所有图标的颜色吗？
   是的，可以通过使用通用选择器 (例如，path) 来覆盖所有图标的路径颜色。

4. 为什么我需要覆盖 currentColor？
   Iconify 使用 SVG 图标，其路径通常使用 fill 属性定义。currentColor 默认应用于 fill，这会覆盖 CSS 中设置的颜色。

5. 我可以使用 Sass/SCSS 吗？
   是的，可以使用 Sass/SCSS，只需相应调整语法即可。