从另一个方向导入整个 SVG 图像文件夹

Question

I want to import whole folder with my SVG icons from another direction. For now i know how to import a single file one by one. Want to import the whole folder, to make code cleaner and to faster implementation.

Tryed to do this like this import Icon from '../../icons'

but that's not the right way i guess.

import './WeatherBox.css'
import Icon from '../../icons'

const dateBuilder = (d) => {
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();

    return `${day} ${date} ${month} ${year}`
}

const WeatherBox = ({result}) => {
    return (
        <div className="locationDate">
            <span>{result.location}</span>
            <span>{dateBuilder(new Date())}</span>
            <span>{result.temp}°C</span>
            <img src={Icon.clear} alt=""/>            
        </div>
    )
}

export default WeatherBox;

Answer 1

If the Icons are in jsx format the way you do is correct. You can import them like any other component in jsx or tsx format

Answer 2

Since you're using React, you're most likely using webpack as well. You must reference all icons in the code, or they won't be available later. You could put them in a static directory and then fetch them that way. Meaning you send a HTTP GET request to /static/directory/${icon}.svg , this way you can load them without having to reference them.

Another solution is to mention them in the code, for example you can create an index.js file inside the icons directory with the following code:

import clear from './clear.svg';

export const Icons = {
  clear,
}

This way you can do the following inside your code:

import { Icons } from '../../icons';
Icons.clear // URL to the svg