React-native-vector-icons: Adding Remix Icon icon set

Created on 8 Sep 2019  路  2Comments  路  Source: oblador/react-native-vector-icons

I've been trying to use the icons from https://remixicon.com/ in React Native. Since they are open sourced and offer a variety of icons, I was wondering if they could be added to this module.

Link to their GitHub https://github.com/Remix-Design/remixicon, and they also have +1700 icons.

Most helpful comment

For those who want to add it, here is the remixicon glyphmap.

Download the remixicon.ttf file from remixicon website.

Add remixicon.ttf to android/app/src/main/assets/fonts and to your Xcode project (+.Info file).

It's easy to use then:

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = require(`${path-to-file}/remixicon.glyphmap.json`);
const Icon = createIconSet(glyphMap, 'remixicon', 'remixicon.ttf');
export default Icon;

Enjoy!

All 2 comments

For those who want to add it, here is the remixicon glyphmap.

Download the remixicon.ttf file from remixicon website.

Add remixicon.ttf to android/app/src/main/assets/fonts and to your Xcode project (+.Info file).

It's easy to use then:

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = require(`${path-to-file}/remixicon.glyphmap.json`);
const Icon = createIconSet(glyphMap, 'remixicon', 'remixicon.ttf');
export default Icon;

Enjoy!

For me the glyphmap seems to be off. The icons works, its just that the name doesn't seem to match the icon. For example for 'home-fill' I am getting a globe. Is there anything that I have done wrong?

According to the glyphmap when I am asking for home-fill: 60881 I am receiving globe-line: 60812. One more example asking zoom-out-line: 61959 and getting thumb-up-line: 61763

Was this page helpful?
0 / 5 - 0 ratings