🎨 Iconic icons for React Native (+Web)
import { AnnotationDots } from '@nandorojo/iconic'
export const Icon = () => <AnnotationDots />
react-native-svg
propsIconic is an awesome icon set made by @jamesm and @ormanclark. It has 200+ free icons and a premium plan. This library exports React Native components for each of its free icons.
See the example snack 🍔.
yarn add @nandorojo/iconic react-native-svg
Each icon is exported as its own component with an adjusted name.
For example, to use the arrow-down
icon, import ArrowDown
:
import { ArrowDown } from '@nandorojo/iconic'
You can also import * as Iconic
:
import * as Iconic from '@nandorojo/iconic'
export const Icon = () => <Iconic.ArrowDown />
For a full directory of components, see the Iconic website.
<ArrowUp color="black" />
<ArrowUp height={30} width={30} />
Each icon component accepts all the props from react-native-svg
's Svg
component. Reference their docs.
This library uses react-native-svg
. The components are generated by svgr
. I downloaded all the free icons from iconic.app and ran a script to codegen the files from there.
Since Iconic updates their icons somewhat frequently, you may want to import the new ones. These are the steps to update this library with new icons:
generate/iconic/svg
folder with the the svg
folder you downloadedyarn install
and yarn prepare