cregis-icon-react-native

React Native 图标库，支持全局主题（大小、颜色）与单图标覆盖。

安装

npm install cregis-icon-react-native

快速使用

1️⃣ 基础用法

import {
  EdsAddAddressBooks,
  EdsAddCircle,
  EdsAddCircleFill,
  EdsAddEmployerFill,
} from "cregis-icon-react-native";
import { View } from 'react-native';

export default function App() {
  return (
    <View>
      <EdsAddAddressBooks />
      <EdsAddCircle />
      <EdsAddCircleFill size={20} color="#16a34a" />
      <EdsAddEmployerFill color="#ef4444" />
    </View>
  )
}

2️⃣ 使用CregisIconProvider

import {
  EdsAddAddressBooks,
  EdsAddCircle,
  EdsAddCircleFill,
  EdsAddEmployerFill,
  CregisIconProvider
} from "cregis-icon-react-native";
import { View } from 'react-native';

export default function App() {
  return (
    <View>
      <CregisIconProvider size={28} color="#2563eb">
        {/* 继承CregisIconProvider主题 */}
        <EdsAddAddressBooks />
        <EdsAddCircle />
        {/* 单独覆盖 */}
        <EdsAddCircleFill size={20} color="#16a34a" />
        <CregisIconProvider color="#ef4444">
          <EdsAddEmployerFill />
        </CregisIconProvider>
      </CregisIconProvider>
    </View>
  )
}

3️⃣ 使用CregisIcon（字符串方式）

通过字符串名称使用图标，适合动态场景：

import { CregisIcon } from "cregis-icon-react-native";
import { View } from 'react-native';

export default function App() {
  return (
    <View>
      <CregisIcon icon="eds-add-address-books" size={22} color="#f0f" />
      <CregisIcon icon="eds-add-circle" size={24} color="#16a34a" />
      <CregisIcon icon="eds-alarm-fill" />
    </View>
  )
}

4️⃣ 项目入口设置全局样式

import { setDefaultIconTheme } from "cregis-icon-react-native";

setDefaultIconTheme({ size: 24, color: "#111827" });

API

组件配置

优先级：高

| 属性名 | 类型 | 说明 | 默认值 | |--------|------|------|--------| | size | number | 图标大小 | 24 | | color | string | 图标颜色 | #111827 |

CregisIcon配置

优先级：高（与组件配置相同）

| 属性名 | 类型 | 说明 | 默认值 | |--------|------|------|--------| | icon | string | 图标名称（kebab-case格式，如 "eds-add-address-books"） | - | | size | number | 图标大小 | 继承主题或 24 | | color | string | 图标颜色 | 继承主题或 #111827 |

CregisIconProvider配置

优先级：中

| 属性名 | 类型 | 说明 | |--------|------|------| | size | number | 图标大小 | | color | string | 图标颜色 |

全局配置

优先级：低

setDefaultIconTheme({ size: 24, color: "#111827" });

| 属性名 | 类型 | 说明 | |--------|------|------| | size | number | 图标大小 | | color | string | 图标颜色 |