# jui-icons
**Repository Path**: NativeBase/jui-icons
## Basic Information
- **Project Name**: jui-icons
- **Description**: react-native 图标
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://rn.jiaoxiaoyuan.cn/iocn
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-01
- **Last Updated**: 2025-01-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 安装
```bash
yarn add jui-icons
```
## API-图标
| 属性名 | 描述 | 类型 | 默认值 | 版本 |
| :------------ | ---------------- | -------------------- | --------- | ---- |
| size | 图标大小 | `number` | 24 | - |
| color | 图片颜色 | `ColorValue` | `#5A6068` | - |
| strokeWidth | Outline 的路径宽 | `number` | - | - |
| svgStyle | svg 内部的样式 | `ViewProps['style']` | - | - |
| touchableSize | 可点击的范围大小 | `number` | 44 | - |
## 直接使用
```tsx
import React from 'react'
import { SuccessOutline } from 'jui-icons'
const App: React.FC = () => {
return
}
```
## API-Icon
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------- | -------- | --------- |
| `name` | 图标名称 | String | - |
| `fill` | 填充颜色 | String | `#000000` |
| `stroke` | 轮廓颜色 | String | - |
| `xml` | 传递 SVG xml 字符串，自定义图标 | String | - |
| `size` | 大小 | Number | 26 |
| `width` | 宽度(默认为`size`的值) | Number | 26 |
| `height` | 高度(默认为`size`的值) | Number | 26 |
| `paths` | SVG path d=`paths` | String[] | - |
| `color` | 图标颜色(会覆盖fill属性) | String | - |
| `touchable` | 是否可点击 | Boolean | false |
| `onPress` | 点击事件回调 | Function | - |
图标组件通过 [`react-native-svg`](https://github.com/react-native-community/react-native-svg) 支持 svg 图标，基于这一特性封装图标组件库，它不是基于字体文件封装的组件，相比字体图标组件易于扩展体积较小。
### 基础实例
```tsx
import React from "react"
import { Icon } from 'jui-icons';
export default function Demo() {
return (
<>
)
}
```
### 自定义图标轮廓颜色
```tsx
import React from "react"
import { Icon } from 'jui-icons';
export default function Demo() {
return (
<>
)
}
```
### 自定义图标
```ts
import React from "react"
import { Icon } from 'jui-icons';
import { View } from 'react-native';
export default function Demo() {
return (
<>
)
}
```
### 使用XML传递svg需要在@/asstes/fonts中传递颜色
```ts
```
```ts
export function encoding(color) {
return `
`
}
```