Иконки SVG в React не отображаются

У меня проблема с загрузкой 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. Вам нужно показать, как?

Andrew 11.04.2018 18:54

Ну, я никогда раньше не использовал файлы svg, поэтому не знаю как: /

John Bra 11.04.2018 18:59
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
1 829
1

Ответы 1

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;

Попробуйте импортировать это в свой проект и отрендерить. Это будет не стилизованная молния.

О, это действительно помогло мне. Ты восхитителен :)

John Bra 12.04.2018 08:23

Без проблем! Хорошая вещь в том, чтобы написать его таким образом, заключается в том, что вы также можете использовать классы CSS для его стилизации. CSS поддерживает стили svg, такие как stroke, fill, transition и т. д. Не стесняйтесь голосовать за и отмечать как правильный, если вам нравится этот ответ;)

Andrew 12.04.2018 17:50

Другие вопросы по теме