Skip to main content
Version: 0.3.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

For React.js​

npm install @svgr-iconkit/fontawesome

For React Native​

npm install @svgr-iconkit/fontawesome react-native-svg

Start your project​

Import icon from your project

React.js for Web​

React Native or Expo​

Using react-native for website​

From 0.3.x, it's extending full set of properties from react-native via react-native-web. It's suggested to define "custom.d.ts" in typescript or use "/native" entry to conform the typescript defintion. It make sure your styling properties converted as expected.

Option 1 - Use /native entry​
src/App.tsx
import { View } from "react-native";
import FontawesomeIcon from "@svgr-iconkit/fontawesome/native";

export default function App() {
  return <View>
    <FontawesomeIcon name="heart" color="red" size={24} onPress={(evt) => { /** Do something **/ }} />
  </View>
}
Option 2 - Resolve by alias​
custom.d.ts
// In custom.d.ts
declare module "@svgr-iconkit/core" {
  export * from "@svgr-iconkit/core/native"
  export { default } from "@svgr-iconkit/core/native"
}
webpack.config.js
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Resolving "react-native" module first.
  config.resolve.mainFields = ['react-native', 'browser', 'module', 'main']
  // Finally return the new config for the CLI to use.
  return config;
};

src/App.tsx
// In code
import { View } from "react-native";
import FontawesomeIcon from "@svgr-iconkit/fontawesome";

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