https://github.com/software-mansion-labs/swm-icon-pack-react
React components for swm-icon-pack
https://github.com/software-mansion-labs/swm-icon-pack-react
Last synced: 2 months ago
JSON representation
React components for swm-icon-pack
- Host: GitHub
- URL: https://github.com/software-mansion-labs/swm-icon-pack-react
- Owner: software-mansion-labs
- Created: 2023-03-31T12:25:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-20T18:45:07.000Z (about 1 year ago)
- Last Synced: 2024-04-21T15:41:26.022Z (about 1 year ago)
- Language: TypeScript
- Size: 36.1 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @swmansion/icons
React and React Native components for Software Mansion icon pack.
[Check out the web Example app](https://github.com/software-mansion-labs/swm-icon-pack-react/tree/main/example)
[Check out the native Example app](https://github.com/software-mansion-labs/swm-icon-pack-react/tree/main/exampleNative)
- [Browse icons](#browse-icons)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Available props](#available-props)
- [Contributing](#contributing)
## Browse icons
[Check out the swm-icon-pack on Figma](https://www.figma.com/community/file/942053544758339202/swm-icon-pack)
## Features
1. Ready to use React / React Native components.
2. Uses .svg under the hood in React and .ttf in React Native for optimal performance.
3. Customizable variant, size and color.
## Installation
### React
1. Install library
```bash
yarn add @swmansion/icons
```
### Bare React Native
1. Install library
```bash
yarn add @swmansion/icons
```
2. On iOS and Android you also have to link fonts with your native code. The easiest way to do that is creating `react-native.config.js` file at the root of your project with:
```javascript
const path = require('path')
module.exports = {
project: {},
assets: [path.join(__dirname, 'node_modules', '@swmansion/icons', 'fonts')],
}
```
3. Link assets:
```bash
npx react-native-asset
```
### Expo managed workflow
1. Install library
```bash
yarn add @swmansion/icons
```
2. Link icon fonts with native code. Follow Expo [instruction](https://docs.expo.dev/develop/user-interface/fonts/#use-a-custom-font). When you are using config plugins with SDK 50 and above you can just install `expo-font` and configure it in `app.json`:
```json
{
"expo": {
"plugins": [
[
"expo-font",
{
"fonts": [
"./node_modules/@swmansion/icons/fonts/broken/swm-icons-broken.ttf",
"./node_modules/@swmansion/icons/fonts/outline/swm-icons-outline.ttf",
"./node_modules/@swmansion/icons/fonts/curved/swm-icons-curved.ttf"
]
}
]
]
}
}
```
3. Remember to rebuild native part of your app.
## Usage
```jsx
import React from 'react';
import { Icon } from '@swmansion/icons';
const App = () => {
return (
<>
>
)
};
export default App;
```
## Available props
| Prop | Type | Default | Description |
| ------------- | ------------------------------------- | --------- | ----------------------------------------------- |
| `name` (required) | `string` | | Name of the icon you want to render | |
| `type` | `outline` `broken` `curved` | `outline` | Selected type of the icon |
| `size` | `number` | `24` | Width and height of the icon | |
| `color` | `string` | `black` / `inherit` | Color of the icon |
## Contributing
### Updating icons
1. Export icons from Figma in SVG format.
2. Put icons in the proper subdirectory inside `icons/`.
3. Convert svg icons to font. Remember to replace `iconType` and `font-name` with proper values:
```bash
yarn generate-icons -i icons/iconType -o fonts/iconType -f font-name
```
4. Rebuild library.
### Adding new icon variant
1. Repeat steps 1-3 from [updating icons section](#updating-icons). Remember to create new subdirectory inside `icons/`.
2. Add icons config to the `iconMap` in `/react-native-icon-pack/src/Icon/Icon.tsx`.
3. Add icons config to the `iconVariants` in `/react-icon-pack/src/Icon.tsx`.
4. Rebuild library.