recolog

@t0m0120

react-native-fontawesomeで独自svgをfontとして追加する

October 08, 2019

ReactNativeFontAwesomenpmpackage

最近プロダクトのIconに自社フォントファイルとreact-native-vector-iconsが混在していたのを
FortAwesome/react-native-fontawesomeでpro-solidにほとんどを置き換えたのでメモ。

READMEのBuild a Library to Reference Icons Throughout Your App More Convenientlyにある様に

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

とかが基本だと思うが

pro-lightやpro-solidで名前が被る場合は
asでrename

import {
  faPlusCircle,
} from '@fortawesome/pro-light-svg-icons';
import {
  faPlusCircle as fasFaPlusCircle,
} from '@fortawesome/pro-solid-svg-icons';
library.add(
  faPlusCircle,
  fasFaPlusCircle
)

独自のSVGを追加する場合は変数で下記の様に追加する。

const faHoge = {
  prefix: 'fao',
  iconName: 'hoge',
  icon: [
    512,
    512,
    [],
    'f000',
    'SVGのdを入れる長過ぎるので省略'
  ],
} as any;

library.add(
  faHoge
)

// Componentで
<FontAwesomeIcon icon={['fao', 'hoge']} />

といった感じでIconと一部独自のIconに移行できた。

初めてFontAwesomeのPro使ってみたがFontAwesome自体は太くてダサいなと思っていたが
pro-lightは細めで使いやすいなーと思った。

あとドラマシリコンバレーの中の会社のアイコンがあって笑った。