У меня проблема с загрузкой SVG-иконок в React. Я добавил svg-inline-loader в webpack, но он не показывает значок. Он просто показывает ненайденную картинку. Я хотел бы добавить значки SVG в качестве img src, фонового изображения и значка ярлыка.
Обновлено:
Это мой webpack.config
module.exports = {
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
filename: "./js/out.js"
},
devServer: {
inline: true,
contentBase: './',
port: 3001
},
watch: true,
module: {
loaders: [{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','stage-2', 'react']
}
}, {
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
]
}
};
Ну, я никогда раньше не использовал файлы svg, поэтому не знаю как: /






jsx преобразует ваш код в ванильный javascript и поддерживает svg. Таким же образом вы можете делать <div>, вы можете делать <svg>.
Откройте файл svg в текстовом редакторе и измените тип файла на jsx. После этого просто измените код на jsx. Ниже приведен 100% допустимый jsx, который выглядит идентично тому, что у вас изначально есть в исходном svg. В исходном svg есть множество элементов, которые вы можете удалить, но, как видите, концепции те же.
import * as React from 'react';
//I have this file named as lightning.jsx
const SVG= (
<svg
className = "control-lightning"
viewBox = "0 0 483.73 483.73"
>
<g>
<polygon
points = "119.637,282.441 192.449,282.441 165.869,
483.73 364.094,189.622 296.631,189.622 325.678,0"
/>
</g>
</svg>
);
export default SVG;
Попробуйте импортировать это в свой проект и отрендерить. Это будет не стилизованная молния.
О, это действительно помогло мне. Ты восхитителен :)
Без проблем! Хорошая вещь в том, чтобы написать его таким образом, заключается в том, что вы также можете использовать классы CSS для его стилизации. CSS поддерживает стили svg, такие как stroke, fill, transition и т. д. Не стесняйтесь голосовать за и отмечать как правильный, если вам нравится этот ответ;)
Вы всегда можете просто изменить файл svg на файл jsx. Вам нужно показать, как?