color-message-lingyun-vue

灵运（Lingyun）图标集的 Vue 3 组件库，包含 170+ 精美图标。

📦 安装

pnpm add color-message-lingyun-vue
# 或
pnpm add color-message-lingyun-vue
# 或
yarn add color-message-lingyun-vue

🚀 快速开始

按需引入（推荐）

<script setup>
import { IconSearch, IconClose, IconMenu } from 'color-message-lingyun-vue'
</script>

<template>
  <div>
    <IconSearch />
    <IconClose />
    <IconMenu />
  </div>
</template>

全局注册

// main.ts
import { createApp } from 'vue'
import LingyunIcons from 'color-message-lingyun-vue/global'
import App from './App.vue'

const app = createApp(App)
app.use(LingyunIcons)
app.mount('#app')

在组件中使用：

<template>
  <div>
    <icon-search />
    <icon-close />
    <icon-menu />
  </div>
</template>

🎨 自定义样式

所有图标都是 SVG 组件，支持通过 CSS 自定义：

<template>
  <IconSearch
    style="width: 32px; height: 32px; color: #409eff;"
    class="my-icon"
  />
</template>

<style scoped>
.my-icon {
  cursor: pointer;
  transition: all 0.3s;
}

.my-icon:hover {
  color: #66b1ff;
  transform: scale(1.1);
}
</style>

🎯 动态使用

<script setup>
import { shallowRef } from 'vue'
import { IconSearch, IconClose } from 'color-message-lingyun-vue'

const currentIcon = shallowRef(IconSearch)

const toggleIcon = () => {
  currentIcon.value = currentIcon.value === IconSearch ? IconClose : IconSearch
}
</script>

<template>
  <div>
    <component :is="currentIcon" @click="toggleIcon" />
  </div>
</template>

📊 特性

• ✅ 170+ 精美图标
• ✅ Vue 3 组件
• ✅ TypeScript 支持
• ✅ 按需引入
• ✅ Tree Shaking
• ✅ 支持全局注册
• ✅ SSR 友好

🔧 TypeScript 支持

本包使用 TypeScript 编写，提供完整的类型定义：

import type { Component } from 'vue'
import { IconSearch } from 'color-message-lingyun-vue'

const icon: Component = IconSearch

💡 最佳实践

使用 shallowRef 优化性能

import { shallowRef } from 'vue'

// ✅ 推荐：使用 shallowRef
const icon = shallowRef(IconSearch)

// ❌ 避免：使用 ref 会导致不必要的深度响应
const icon = ref(IconSearch)

按需引入减小体积

// ✅ 推荐：只引入需要的图标
import { IconSearch, IconClose } from 'color-message-lingyun-vue'

// ❌ 避免：引入所有图标
import * as Icons from 'color-message-lingyun-vue'

📄 License

MIT License