快速开始

本指南会帮助你在 React Native 项目中开始使用 YCloud Icons。 请先确保你已经准备好 React Native 开发环境。如果还没有，可以使用 React Native CLI、Expo 或其他你熟悉的 React Native 脚手架创建一个新项目。

版本要求

@ycloud-web/icons-react-native 的最低版本要求：

• React ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
• React Native 任意版本
• react-native-svg ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0

安装

首先确保已经安装 react-native-svg（版本 12 到 15）。然后安装图标包：

pnpm

pnpm add @ycloud-web/icons-react-native@latest

yarn

yarn add @ycloud-web/icons-react-native@latest

npm

npm install @ycloud-web/icons-react-native@latest

bun

bun add @ycloud-web/icons-react-native@latest

导入第一个图标

YCloud Icons 基于 ES Modules 构建。

每个图标都可以作为 React 组件导入，并渲染为 react-native-svg 元素。

import { Camera } from '@ycloud-web/icons-react-native';

// 使用
const App = () => {
  return <Camera />;
};

export default App;

属性

你可以通过以下 props 调整图标外观：

名称	类型	默认值
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

由于图标最终会渲染为 SVG 元素，所有标准 SVG 属性也可以作为 props 传入。可参考 MDN 上的 SVG Presentation Attributes 列表。

// 使用
const App = () => {
  return (
    <Camera
      size={48}
      color="red"
      strokeWidth={1}
    />
  );
};

继续阅读下面的内容，了解更多 props 用法和示例：

颜色调整图标颜色。尺寸调整图标尺寸。描边宽度调整图标描边宽度。