Skip to main content
Version: 0.2.x

Intro

Inspired by gregberge/svgr and oblador/react-native-vector-icons, the kit set used to rendering SVG formatted icon content directly and supporting different framework/ platform on Next.js React.js, React-Native and Expo.

It provide below benefits:

  • Standardize same set of icons.
  • Easy to integrate with styled-components or css based framework (for web only).
  • All svg content exported as pure JS data easier to be reuse in other platform and/or in-app updates solution like CodePush in react native.

Install packages​

Install package in your react.js, react-native or expo project

npm install @svgr-iconkit/fontawesome5

Start your project​

Import icon from your project

React.js/Next.js for Web​

import FontawesomeIcon from "@svgr-iconkit/fontawesome5";

export default function App() {
  return <div>
    <FontawesomeIcon name="heart" color="red" size={24} />
  </div>
}

React Native or Expo​

import { View } from "react-native";
import FontawesomeIcon from "@svgr-iconkit/fontawesome5";

export default function App() {
  return <View>
    <FontawesomeIcon name="heart" color="red" size={24} />
  </View>
}

Using with react-native-web​

Due to limitation of webpack resolving used in react-native-web, it's suggested to use "/native" from package or adding ".web.js" when resolving files in webpack configuration.

Example 1:

import { View } from "react-native";
import FontawesomeIcon from "@svgr-iconkit/fontawesome5/native";

export default function App() {
  return <View>
    <FontawesomeIcon name="heart" color="red" size={24} />
  </View>
}

Example 2:

See sample of webpack config https://github.com/svgr-iconkit/svgr-iconkit/blob/main/examples/expo-explorer/webpack.config.js