You can use this tool to convert fonts to react/react-native Icon Components.
Support font formats:
- ttf
- woff/woff2
- otf
- eot
npm install -g react-font-svg react-font-svg ./src/icons/fontawesome-webfont.ttf -d ./src/iconsIt will generate Jsx component, contains svg paths(default react-native):
/** * @file Icon.js * @author */ import React from "react"; import Svg, {Path} from 'react-native-svg'; // icon glyphs const glyphs = { 'glass':'M1699 -198 q0 -23 -18 -36.5 q-18 -13.5 -38 -17.5 q-20 -4 -43 -4 l-1408 0 q-23 0 -43 4 q-20 4 -38 17.5 q-18 13.5 -18 36.5 q0 35 43 78 l632 632 l0 768 l-320 0 q-26 0 -45 19 q-19 19 -19 45 q0 26 19 45 q19 19 45 19 l896 0 q26 0 45 -19 q19 -19 19 -45 q0 -26 -19 -45 q-19 -19 -45 -19 l-320 0 l0 -768 l632 -632 q43 -43 43 -78 Z', 'ok':'M1643 178 l-136 -136 q-28 -28 -68 -28 q-40 0 -68 28 l-656 657 l-294 -295 q-28 -28 -68 -28 q-40 0 -68 28 l-136 136 q-28 28 -28 68 q0 40 28 68 l362 362 l136 136 q28 28 68 28 q40 0 68 -28 l136 -136 l724 -724 q28 -28 28 -68 q0 -40 -28 -68 Z' }; const Icon = props => ( <Svg width={props.width || 120} height={props.height || 120} viewBox={props.viewBox || "0 -256 1792 1792"}> <Path fill={props.color || '#000'} d={glyphs[props.name] || ''}></Path> </Svg> ); export default Icon;You can use it in React, ReactNative project now:
import React from 'react'; import Icon from './Icon'; export default class App extends React.Component { render() { return ( <> <Icon name="glass" color="#000" width="100" height="100" viewBox="0 0 1024 1024"/> <Icon name="ok" color="#000"/> </> ); } }const reactFontSvgConverter = require('react-font-svg'); const iconTexts = reactFontSvgConverter( './font/iconfont.ttf', { names: ['music', 'search'], unicodes: [0xf001, 0xf002], platform: 'react-native' }); // output // {Icon: ''}- React Native project should import
react-native-svgmodules. - Font formats like
otforwoffwill cause errors in some cases, you can convert tottffont file before generate.
react-font-svg -h
Usage $ react-font-svg <file> [<output>] Example $ react-font-svg ./src/font.ttf $ react-font-svg ./src/font.ttf -n 'music,search' -u '0xf00d,0xf00e' -d ./src/icons Options, -n, --names glyph names to output eg. -n music,search -u, --unicodes unicode code points to output eg. -u 0xe001,0xe002 -d, --dest output folder -p, --platform component template: react-native|react