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