React native Question posted in
The official React Native documentation can be found here.

React native – Adding custom icons to React-Native project

While developing a project in react native and using icons from IonIcons, I realized that the icons for repeat single tract and repeat queue are absent. I have found suitable icons in the form of an svg, how do I add them to my project? I am using react-native-vector-icons package.

I have tried manually inserting the icon into the font file and change the glyph maps. I have also tried adding a custom font file. Both didn’t work.

Tags:

2

Answers


  1. 0

    To use custom svg icons, you’ll need to install these two dependencies:

    (make sure to follow the set-up instructions for both the dependencies)

    Once you’ve configured the dependencies, re-build the app. Then, create a reusable svg component as follows which will accept the props name, style, width, height.

    const SvgIcon = (props) => {
  const {style, width = 24, height = 24, color} = props;
  const propsObj = {
    style,
    width,
    height,
    fill: color,
  };
  return <props.name {...propsObj} />;
};
export default SvgIcon;

    Finally, use this component in any other component as follows (assuming you have saved the svg file as mySvgIcon.svg):

    import SvgIcon from '../components/SvgIcon';
import MySvgIcon from '../mySvgIcon.svg';

// Rest of the component code

<SvgIcon
    width={20}
    name={MySvgIcon}
    height={20}
    color={'white'}
 />
    Login or Signup to reply.
  2. 0

    I don’t know exactly your React Native version, so I try to give you the most detail document.

    Here is Link.

    Some notes for you:

    • With each version of RN the metro.config.js file is different
    • You should create a folder to contain .svg files, then use index.js file to import/export
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search