Как импортировать svg в antd -> компонент Icon

Привет, я пытаюсь импортировать свой собственный svg в компонент antd -> Icon как в документация, но у меня есть исключение

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/archive-solid.3c305173.svg') is not a valid name.

Я использую приложение create response 2.1.1 и antd версии 3.10.3 Я бы не хотел извлекать приложение create response, и у меня нет доступа к webpack Любые идеи. что код:

import React, { Component } from "react";
import { Layout, Menu, Icon } from "antd";
import ArchiveSVG from "../../../img/icons/archive-solid.svg";

const { Sider } = Layout;

class SideBar extends Component {
state = {
  collapsed: false
};

onCollapse = collapsed => {
  this.setState({ collapsed });
};

render() {
 return (
   <Sider
     collapsible
     collapsed = {this.state.collapsed}
     onCollapse = {this.onCollapse}
   >
     <div className = {styles.logo} />
     <Menu theme = "dark" defaultSelectedKeys = {["1"]} mode = "inline">
       <Menu.Item key = "4">
         <Icon component = {ArchiveSVG} />
         <span>Products</span>
       </Menu.Item>
     </Menu>
   </Sider>
 );
}
}

Где находится archive-solid.svg? Вне папки src/?

— 17.11.2018 03:48

вы пробовали этот подход: stackoverflow.com/questions/52344200/…

— 19.11.2018 16:32

svg create-react-app antd

15.11.2018 16:25

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

6 015

Ответы 4

Упростите свой svg, и экспорт будет как JSX, как показано ниже

import React from 'react';

export default () => <svg viewBox = "0 0 512 512" width = "1em" height = "1em" fill = "currentColor">
    <path fill = "currentColor" d = "M8.309 189.836L184.313 37.851C199.719 24.546 224 35.347 224 56.015v80.053c160.629 1.839 288 34.032 288 186.258 0 61.441-39.581 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 45.344-145.012-21.507-183.51-176.59-185.742V360c0 20.7-24.3 31.453-39.687 18.164l-176.004-152c-11.071-9.562-11.086-26.753 0-36.328z">
    </path>
</svg>

а затем использование похоже на

<Icon component = {RepySVG} />

Чтобы получить дополнительную помощь, создайте перо для кода.

29.03.2019 11:39

Вам необходимо добавить следующие строки в ваш webpack.config.js, чтобы напрямую импортировать SVG как компонент.

            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: '@svgr/webpack',
                        options: {
                            babel: false,
                            icon: true,
                        },
                    },
                ],
            }

Связанный документ

18.07.2019 10:03

Этот метод сработал для меня

import ArchiveSVG from "../../../img/icons/archive-solid.svg";

const archive = () => (
   <img src = {ArchiveSVG} />
);

Затем используйте это

<Icon component = {archive} />

Удачного кодирования :-)

28.11.2019 14:33

import Icon from '@ant-design/icons';
import { ReactComponent as USAFlagIcon } from "./usa-flag.svg";

const USFlag = () => <Icon component = {USAFlagIcon} />

Также, чтобы изменить цвет пользовательского значка, вам необходимо удалить атрибуты SVG. (Я использую svgo .. * как нам это? * файл конфигурации)

19.09.2020 11:20