@swmansion/icons

React and React Native components for Software Mansion icon pack.

Check out the web Example app

Check out the native Example app

• Browse icons
• Features
• Installation
• Usage
• Available props
• Contributing

Browse icons

Check out the swm-icon-pack on Figma

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

yarn add @swmansion/icons

Bare React Native

1. Install library

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:

const path = require('path')

module.exports = {
  project: {},
  assets: [path.join(__dirname, 'node_modules', '@swmansion/icons', 'fonts')],
}

3. Link assets:

npx react-native-asset

Expo managed workflow

1. Install library

yarn add @swmansion/icons

2. 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 in app.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

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

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:

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. 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.