@cregis/icon

cregis icon
5,789
Install
npm install @cregis/icon
Latest Version:0.1.31
Vue:3
Last Updated:Sep 22, 2026
Links: npm
Maintainer: pinfan

🪶 @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;
}

Related Packages

@jt-icons/icon-vue-components

Vue components of JT Icons collection.

2,961 1
birdpaper-icon

基于 Remix icon 生成的 Vue3 图标组件库

258,415 1
vicons

SVG Vue components integrated from `fluentui-system-icons` and `ionicons`.

53,979
vue-svg-icon

a simple solution for multicolor svg icon in vue

13,095

Version History

Version Released Vue License
0.1.31 ^3.2.0
0.1.30 ^3.2.0
0.1.29 ^3.2.0
0.1.26 ^3.2.0
0.1.25 ^3.2.0