How to add local Icons to menus in reactjs?

问题

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

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.

回答1:

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:).

回答2:

Try this :

import Icon from "filePath/svgName";

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

<img src={Icon}/>

回答3:

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";

来源：https://stackoverflow.com/questions/60162885/how-to-add-local-icons-to-menus-in-reactjs

标签

javascript

reactjs

image