#javascript #reactjs #svg #next.js
#javascript #reactjs #svg #next.js
Вопрос:
Я хотел динамически получать значки SVG. Я нашел способ сделать это, но, похоже, я допустил некоторые ошибки. Где я делаю это неправильно?
Icon.js
import React from "react";
import { ReactComponent as Bollards } from "./icons/bollards.svg";
import { ReactComponent as Earthquake } from "./icons/earthquake.svg";
import { ReactComponent as Fire } from "./icons/fire.svg";
import { ReactComponent as Healthy } from "./icons/heartbeat.svg";
import { ReactComponent as Home } from "./icons/home.svg";
import { ReactComponent as Planting } from "./icons/planting.svg";
import { ReactComponent as Business } from "./icons/suitcase.svg";
import { ReactComponent as Travel } from "./icons/airplane-around-earth.svg";
const iconTypes = {
bollards: Bollards,
earthQuake: Earthquake,
fire: Fire,
healthy: Healthy,
home: Home,
planting: Planting,
business: Business,
travel: Travel
};
const IconComponent = ({ name, ...props }) => {
let Icon = iconTypes[name];
return <Icon {...props} />;
};
export default IconComponent;
Feautures.js
import React from "react";
import Icon from "./icon";
export default function Features() {
return (
<div>
<Icon name="bollards" />
</div>
);
}
Я получаю эту ошибку при попытке экспортировать значки.
error - ./components/icon.js
Attempted import error: 'ReactComponent' is not exported from './icons/bollards.svg' (imported as 'Bollards').
Ответ №1:
Вы можете использовать SVGR, который позволяет нам импортировать SVG в ваши приложения React в качестве компонентов.
Вам нужно добавить @svgr/webpack
в качестве зависимости и изменить next.config.js
файл следующим образом.
next.config.js
:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
};
Затем вы можете просто импортировать свои значки без использования ReactComponent
.
Icon.js
:
import React from "react";
import Bollards from './icons/bollards.svg';
import Earthquake from './icons/earthquake.svg';
import Fire from './icons/fire.svg';
import Healthy from './icons/heartbeat.svg';
import Home from './icons/home.svg';
import Planting from './icons/planting.svg';
import Business from './icons/suitcase.svg';
import Travel from './icons/airplane-around-earth.svg';
const iconTypes = {
bollards: Bollards,
earthQuake: Earthquake,
fire: Fire,
healthy: Healthy,
home: Home,
planting: Planting,
business: Business,
travel: Travel
};
const IconComponent = ({ name, ...props }) => {
let Icon = iconTypes[name];
return <Icon {...props} />;
};
export default IconComponent;
Рабочая демонстрация доступна на CodeSandbox.
Комментарии:
1. Это работает. Большое вам спасибо за то, что уделили свое драгоценное время и помогли.