@qklinglingba/vue-svg-theme

Vue 3 SVG 图标一键换色。

安装

npm install @qklinglingba/vue-svg-theme

使用

1. 准备 SVG 文件

放到 src/assets/image/ 目录下，SVG 中使用 fill="currentColor"。

2. 根组件包裹 ThemeProvider

<!-- App.vue -->
<template>
  <ThemeProvider defaultColor="blue">
    <router-view />
  </ThemeProvider>
</template>

<script setup lang="ts">
import { ThemeProvider } from '@qklinglingba/vue-svg-theme'
</script>

3. 使用 SvgIcon

<template>
  <SvgIcon :src="cloudSrc" :color="colorHex" :size="48" />
</template>

<script setup lang="ts">
import { SvgIcon, useTheme } from '@qklinglingba/vue-svg-theme'
import cloudSrc from '@/assets/image/cloud.svg'  // import 拿到 URL

const { colorHex } = useTheme()
</script>

4. 切换颜色

<template>
  <div v-for="(hex, key) in COLOR_PRESETS" :key="key">
    <div :style="{ background: hex }" @click="setColor(key)" />
  </div>
</template>

<script setup lang="ts">
import { useTheme, COLOR_PRESETS } from '@qklinglingba/vue-svg-theme'
import type { ColorKey } from '@qklinglingba/vue-svg-theme'

const { setColor } = useTheme()
</script>

API

<ThemeProvider>

| 参数 | 类型 | 默认值 | 说明 | |---|---|---|---| | defaultColor | ColorKey | 'blue' | 初始颜色 |

useTheme()

| 返回值 | 说明 | |---|---| | colorHex | 当前颜色 hex 值 | | setColor | 设置颜色 |

<SvgIcon>

| 参数 | 类型 | 默认值 | 说明 | |---|---|---|---| | src | string | — | SVG 文件 URL（import 得到） | | color | string | — | 目标颜色 hex | | size | number | 24 | 图标尺寸 |

<ColorIcon>

用于 Vite + vite-svg-loader 的 ?component 导入模式。

预设颜色

COLOR_PRESETS → { blue, green, purple, orange, red, cyan, pink }