🪶 @cregis/icon

一组基于 Vue 3 + TypeScript + Vite 构建的图标组件库。
支持全局默认样式配置（颜色、尺寸），也支持组件级别自定义。

📦 安装

# 使用 npm
npm install @cregis/icon

🚀 快速开始

1️⃣ 在项目入口处进行全局配置

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { iconConfig } from "@cregis/icon";

iconConfig.setDefault({
  size: "32px",   // 默认尺寸
  color: "#0099FF",  // 默认颜色
  strokeWidth: 2, // 默认线宽
});

createApp(App).mount("#app");

💡 全局配置是可选的，如果未配置，将使用组件自身的默认样式。

2️⃣ 在组件中使用图标

<script setup lang="ts">
import { EdsAddAddressBooks, EdsDiamondBusiness } from "@cregis/icon";
</script>

<template>
  <EdsAddAddressBooks size="16px" color="#FF9900" :stroke-width="1.4" />
  <EdsDiamondBusiness />
</template>

✅ 支持按需引入，不需要额外配置。

⚙️ API 说明

全局配置

iconConfig.setDefault(options: IconProps)

| 参数名 | 类型 | 说明 | |--------|------|------| | size | string | 设置全局默认图标大小（如 "24px"、"1.5rem"） | | color | string | 设置全局默认颜色（如 "#000"、"red"） | | strokeWidth | number | 设置全局默认线宽(如 1.4、2) |

组件属性

| 属性名 | 类型 | 说明 | 默认值 | |--------|------|------|--------| | size | string | 图标大小 | 全局默认或内置默认 | | color | string | 图标颜色 | 全局默认或内置默认 | | strokeWidth | number | 图标线宽 | 全局默认或内置默认 |

示例：

<EdsAddAddressBooks size="20px" color="#00bcd4" :stroke-width="1.4" />

📚 类型定义

export interface FixIconProps {
  size?: string;
}

export interface IconProps {
  size?: string;
  color?: string;
  strokeWidth?: number;
}