I want to use my own designed custom icons in react which I have in both formats SVG and TTF. How can I do that? I want to put those icons in my navbar like a custom home icon for home button.

I want to use my own designed custom icons in react which I have in both formats SVG and TTF. How can I do that? I want to put those icons in my navbar like a custom home icon for home button.

• javascript
• reactjs
• react-native
• react-redux
• icons

• Yes you can do but please show us what you have you done so far ? – Sakhi Mansoor Commented Sep 8, 2018 at 18:18
• @SakhiMansoor I would love to. But can you show me an example to use an custom icon? – Neha Sharma Commented Sep 8, 2018 at 18:19
• Use tools such as ioon or font awesome(they support all webfonts including ttf and svg) to upload custom icon, reference url provided by them and use class name to access in html. – tarzen chugh Commented Sep 8, 2018 at 18:25
• @tarzenchugh can you please show me how? Also can I make a seperate ponents of icons and import them in my pages later? – Neha Sharma Commented Sep 8, 2018 at 18:28
• I can show you example how to use svgIcon in your react app but I don't know which UI library you're using. So later you integrate them anywhere – Sakhi Mansoor Commented Sep 8, 2018 at 18:35

1 Answer 1

I'm not sure how is you webpack configured to resolve svg and include them in your build, But I can give you two different approaches here:

• You can make separate SVG files generated from some tool in xml

myIcon.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding./sketch -->
    <title>bus-start</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Booking-a-trip" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Verify" transform="translate(-113.000000, -312.000000)">
            <g id="Group-3" transform="translate(63.000000, 144.000000)">
                <g id="bus-start" transform="translate(51.000000, 169.000000)">
                    <circle id="Oval" stroke="#606C74" fill="#FFFFFF" cx="12" cy="12" r="12"></circle>
                    <path d="M6,15.0585702 C6,15.6952627 6.2925,16.2668389 6.75,16.6647717 L6.75,17.952627 C6.75,18.3505599 7.0875,18.6761413 7.5,18.6761413 L8.25,18.6761413 C8.6625,18.6761413 9,18.3505599 9,17.952627 L9,17.2291128 L15,17.2291128 L15,17.952627 C15,18.3505599 15.3375,18.6761413 15.75,18.6761413 L16.5,18.6761413 C16.9125,18.6761413 17.25,18.3505599 17.25,17.952627 L17.25,16.6647717 C17.7075,16.2668389 18,15.6952627 18,15.0585702 L18,7.82342808 C18,5.29112834 15.315,4.92937123 12,4.92937123 C8.685,4.92937123 6,5.29112834 6,7.82342808 L6,15.0585702 Z M8.625,15.7820844 C8.0025,15.7820844 7.5,15.2973299 7.5,14.6968131 C7.5,14.0962963 8.0025,13.6115418 8.625,13.6115418 C9.2475,13.6115418 9.75,14.0962963 9.75,14.6968131 C9.75,15.2973299 9.2475,15.7820844 8.625,15.7820844 Z M15.375,15.7820844 C14.7525,15.7820844 14.25,15.2973299 14.25,14.6968131 C14.25,14.0962963 14.7525,13.6115418 15.375,13.6115418 C15.9975,13.6115418 16.5,14.0962963 16.5,14.6968131 C16.5,15.2973299 15.9975,15.7820844 15.375,15.7820844 Z M16.5,11.4409991 L7.5,11.4409991 L7.5,7.82342808 L16.5,7.82342808 L16.5,11.4409991 Z" id="Shape" fill="#606C74" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Later in your ponent you can import it like :

import myIcon from 'assets/myIcon.svg' // depending on your folder structure

in render method:

render(){
  return (
   <img src={myIcon} /> 
  )
 }

• Second approach you can make your svg in react using <svg>:

  here is the working codesandbox: Svg Icon + React