Svg Icons Component

[thabti]

I read an interesting article. Since we use font-awesome, we can get the the svg files from https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg and make them into simple React component.

Benefits:

• Less network calls (better than sprites and network calls)
• We have our own set of icons.

thoughts?

[mmahalwy]

Same as this? https://github.com/danawoodman/react-fontawesome

[thabti]

That one isn't SVG, it requires you load the fonts still. I was thinking something like this:

import Folder from './Folder.js';
const Icon=  ({ name, size }) => <svg width={size + 'px'} height={size+'xp'}> {name === 'Folder' &&<Folder />}</svg>

Folder.js would have just the svg path:

expect default ({ color }) => <path h='.....' fill={color} />

usage:

import Icon from 'quran-component/lib/Icon';
...
return ( <Icon name='Folder' size='30' />)

[mmahalwy]

Ah! nice :)

Check this out too: https://github.com/oblador/react-native-vector-icons

[thabti]

found the perfect one: https://github.com/gorangajic/react-icons

[mmahalwy]

Oh yeah... not sure how i forgot about this...