图标颜色
本教程是 Iconify for Vue 教程 的一部分。
您只能更改单色图标的颜色。某些图标（例如表情符号）具有无法更改的硬编码配色方案。
要更改单色图标的颜色，只需更改文本颜色，或使用 color 属性，或添加带有颜色的 style。
All icons inside this div are light blue, including a bell icon
This text and icon are orange:
Red home icons (shows different ways to change color):
Icon with palette:
vue
<template>
<div>
<div class="light-blue-block">
All icons inside this div are light blue, including a bell icon
<Icon icon="bi:bell-fill" :inline="true" />
and stopwatch icon
<Icon icon="bi:stopwatch" :inline="true" />
</div>
<div class="orange-block">
This text and icon are orange:
<Icon icon="bi:bell-fill" :inline="true" />
</div>
<div>
Red home icons (shows different ways to change color):
<Icon class="red-icon" icon="bx:bx-home" :inline="true" />
<Icon :style="{ color: 'red' }" icon="bx:bx-home" :inline="true" />
<Icon color="red" icon="bx:bx-home" :inline="true" />
</div>
<div>Icon with palette: <Icon icon="noto:paintbrush" :inline="true" /></div>
</div>
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon,
},
};
</script>
css
// Change text color for ".orange-block" to #e70
.orange-block {
color: #e70;
}
// Change all icons inside ".light-blue-block" to #08f
.light-blue-block svg {
color: #08f;
}
// Change text color for ".red-icon" to #e00
.red-icon {
color: #e00;
}颜色仅适用于没有调色板的图标。带有调色板的图标（如上方示例中的画笔图标）的颜色无法更改。
更改颜色的方法与更改文本颜色的方法相同。
RGBA 和 HSLA 颜色
避免使用 rgba 和 hsla 颜色。某些图标包含多个相互叠加的图层。使用半透明颜色会导致各图层均可见。
相反，请使用纯色，并通过 opacity 添加透明度。这样浏览器会先以纯色渲染形状，然后再对整个图标应用透明度。
fill 和 stroke
避免在样式表中使用 fill 和 stroke，除非你是为特定图标使用它们。
并非所有图标都相同。有些图标使用 fill 来定义形状，有些则使用 stroke。如果设置了 fill，可能会导致本不应填充的形状被填充。