0

Currently, we are using reactjs in our webapp and we are using default icons from ant design, we have a new Icon design and I already added the SVG icons in the Public folder. The problem is I can’t add my local icons from the public folder to routes.ts where the navigation menus are located. I tried adding the file path of the icons value icon: “../dashboard_poker_cards.svg” (Please see attached screenshot of javascript object menu). I tried a different way of adding the file path in the value of the icon but still won’t show the local icon

enter image description here

I tried also importing the file path in the top of routes.ts but I get warning “declared but its value never read.”

I added const at the top of routes.ts

const dashIcon = require('/dashboard_poker_cards.svg');

and added value in icon: icon: 'dashIcon'

Result: 'dashIcon' is declared but its value is never read.

Melvin Rey
  • 147
  • 3
  • 17
  • Does this answer your question? [How to display svg icons(.svg files) in UI using React Component?](https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component) – keikai Feb 11 '20 at 06:12

3 Answers3

0

Give the path like this:

icon: “./public/icons/icon_name”


icon: “public/icons/icon_name”

I think any of this might work.

Visual studio has some extension paths for .ts so install them then your way of doing will become very easy:).

niranjan kishan
  • 1
  • 4
0

Try this : 

import Icon from "filePath/svgName";

You can use this Icon in any line of code down. For example: 

<img src={Icon}/>
mohamed ibrahim
  • 567
  • 4
  • 12
  • Hi Mohamed, I tried this adding import at the top of the route page with the file path on it and added the Icon in icon: 'Icon' but it did not work. my problem is I don't know the exact way to add the local file path icon in the value of the icon in route.ts – Melvin Rey Feb 11 '20 at 06:25
  • I think you should move your svg to the directory of the react component and give it a try – mohamed ibrahim Feb 11 '20 at 06:26
0

First thing to remember is that all filepaths in React has to start with "/", and that forward slash is a static reference to the public folder. No matter where in the code you are in comparison to the public folder, all image paths will start directly in public.

So what you should be doing is /dashboard_poker_cards.svg instead of going up one level by adding the two dots.

What I prefer doing when working with SVG is creating components of them, to instead import them like any other component.

const YourSvg = ({ className, fill }: IProps) => (
    ... Paste your SVG code in here directly ...
);

export { YourSvg };

This way you can even give them props, to give them dynamic styling, or change the behaviour any way you want, as well as importing them like this:

import { YourSvg } from "src/components/path/to/your/svg/as/a/component/YourSvg.tsx";
Sodnarts
  • 371
  • 2
  • 10
  • I added const at the top of routes.ts, const dashIcon = require('/dashboard_poker_cards.svg'); and added value in icon: icon: 'dashIcon' ===== Result: 'dashIcon' is declared but its value is never read. – Melvin Rey Feb 11 '20 at 07:23
  • You could try creating an actual component of it, instead of the regular Svg syntax though, to see if that helps – Sodnarts Feb 11 '20 at 07:26
  • I'll place the component at the top of the page in route.ts? – Melvin Rey Feb 11 '20 at 07:28
  • Yes, and then use it directly where you would use the svg path instead, but with React syntax of – Sodnarts Feb 11 '20 at 07:29
  • Do I still need to install webpack to run my local svg icon? – Melvin Rey Feb 11 '20 at 08:02
  • You need webpack for any React app, if you used npx create-react-app it is already configured for you, so you don't have to do anything. If not, then you need to set up webpack for your app. – Sodnarts Feb 11 '20 at 08:10