@swmansion/icons
v0.0.1
Published
Software Mansion Icon Pack
Downloads
10
Keywords
Readme
@swmansion/icons
React and React Native components for Software Mansion icon pack.
Check out the native Example app
Browse icons
Check out the swm-icon-pack on Figma
Features
- Ready to use React / React Native components.
- Uses .svg under the hood in React and .ttf in React Native for optimal performance.
- Customizable variant, size and color.
Installation
React
- Install library
yarn add @swmansion/icons
Bare React Native
- Install library
yarn add @swmansion/icons
- 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:
const path = require('path')
module.exports = {
project: {},
assets: [path.join(__dirname, 'node_modules', '@swmansion/icons', 'fonts')],
}
- Link assets:
npx react-native-asset
Expo managed workflow
- Install library
yarn add @swmansion/icons
- Link icon fonts with native code. Follow Expo instruction. When you are using config plugins with SDK 50 and above you can just install
expo-font
and configure it inapp.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"
]
}
]
]
}
}
- Remember to rebuild native part of your app.
Usage
import React from 'react';
import { Icon } from '@swmansion/icons';
const App = () => {
return (
<>
<Icon name='arrow-right' />
<Icon name='arrow-left' type='outline' size={36} color='red' />
</>
)
};
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
- Export icons from Figma in SVG format.
- Put icons in the proper subdirectory inside
icons/
. - Convert svg icons to font. Remember to replace
iconType
andfont-name
with proper values:
yarn generate-icons -i icons/iconType -o fonts/iconType -f font-name
- Rebuild library.
Adding new icon variant
- Repeat steps 1-3 from updating icons section. Remember to create new subdirectory inside
icons/
. - Add icons config to the
iconMap
in/react-native-icon-pack/src/Icon/Icon.tsx
. - Add icons config to the
iconVariants
in/react-icon-pack/src/Icon.tsx
. - Rebuild library.