React and React Native components for Software Mansion icon pack.
Check out the native Example app
Check out the swm-icon-pack on Figma
- 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.
- Install library
yarn add @swmansion/icons
- 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
- 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.
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;
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 |
- 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.
- 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.