是否有任何本机方法可以在 React 中使用 map 函数将导入的 SVG 渲染为 prop？

Question

So, I have few svg files and a list like below:

import accountIco from '../../media/img/account.svg';
import statisticsIco from '../../media/img/statistics.svg';
import invitationIco from '../../media/img/invitation.svg';
import profileIco from '../../media/img/profile.svg';

...

     defaultMenu = [
        {
            to: '/account',
            title: 'Account',
            ico: accountIco
        },
        {
            to: '/statistics',
            title: 'Statistics',
            ico: statisticsIco
        },
        {
            to: '/invitation',
            title: 'Send external',
            ico: invitationIco
        },
        {
            to: '/profile',
            title: 'Profile',
            ico: profileIco
        },
    ]

Then I'm trying to render a list of components like below:

        const list = defaultMenu.map(({ to, title, ico }, index) => (
            <div
                className="header-menu-drop-block-item"
                key={`item-${index}`}
            >
                <NavLink exact to={to}>
                    {ico}
                    <span>{title}</span>
                </NavLink>
            </div>
        ));

ico prop here now returns just a path to the file. How do I render inline svg markup from my file? I have some custom classes in svg markup, so, I dont have to make it with img tag

Answer 1

One option is to import SVGs directly as React components .

// an .svg file example
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

---

The second option is to create a component directly like so:

// a react component rendering SVG example
const IconGraphql = props => (
  <svg viewBox="0 0 24 24" fill="none" {...props}>
    <path
      d="M14.051 2.751l4.935 2.85a2.144 2.144 0 013.409.4 2.146 2.146 0 01-1.354 3.151v5.699a2.132 2.132 0 011.348 3.15 2.143 2.143 0 01-3.453.353l-4.905 2.832a2.14 2.14 0 11-4.171.678c0-.205.029-.41.088-.609l-4.936-2.847a2.14 2.14 0 11-2.052-3.559l.001-5.699A2.141 2.141 0 011.604 6a2.143 2.143 0 013.407-.405l4.938-2.85A2.138 2.138 0 0112 0a2.137 2.137 0 012.051 2.751zm-.515.877a.793.793 0 01-.058.058l6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.135 2.135 0 01-1.558-2.588l.019-.072-4.946-2.858zm-3.015.059l-.06-.06-4.946 2.852a2.136 2.136 0 01-1.461 2.645l-.076.021v5.708l.084.023 6.461-11.19-.002.001zm2.076.507c-.39.112-.803.112-1.192 0l-6.46 11.189c.294.283.502.645.6 1.041h12.911c.097-.398.307-.761.603-1.044L12.597 4.194zm.986 16.227l4.913-2.838a1.748 1.748 0 01-.038-.142H5.542l-.021.083 4.939 2.852a2.126 2.126 0 011.54-.653c.627 0 1.19.269 1.583.698z"
      fill="#F25192"
    />
  </svg>
);

import IconGraphql from './graphqlIcon.react.js'

const App = () => (
  <div>
    <IconGraphql />
  </div>
);

Answer 2

I have mixed your answers and did something like this:

icons.js

import React from 'react';

export const accountIco = 
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
        <path
            d="M43.96 21.98C43.96 34.12 34.12 43.96 21.98 43.96C9.83998 43.96 0 34.12 0 21.98C0 9.83998 9.83998 0 21.98 0C34.12 0 43.96 9.83998 43.96 21.98Z"
            fill="white" />
        <path
            d="M21.9998 27.1C16.4298 27.1 11.4396 29.82 8.38965 33.99C11.6896 37.74 16.5598 40.14 21.9998 40.14C27.3998 40.14 32.2698 37.75 35.5698 33.99C32.5198 29.82 27.5698 27.1 21.9998 27.1ZM21.9998 8.66003C17.5498 8.66003 13.9597 12.25 13.9597 16.66C13.9597 21.11 17.5498 24.7 21.9998 24.7C26.4098 24.7 29.9998 21.11 29.9998 16.66C29.9998 12.25 26.4198 8.66003 21.9998 8.66003Z"
            fill="#FF8676" className="invert" />
        <path
            d="M43.4902 6.75C43.4902 10.03 40.8303 12.6899 37.5503 12.6899C34.2703 12.6899 31.6104 10.03 31.6104 6.75C31.6104 3.47 34.2703 0.809937 37.5503 0.809937C40.8403 0.819937 43.4902 3.48 43.4902 6.75Z"
            fill="#F2F2F3" />
        <path
            d="M42.0298 6.75C42.0298 9.22 40.0298 11.22 37.5598 11.22C35.0898 11.22 33.0898 9.22 33.0898 6.75C33.0898 4.28 35.0898 2.28003 37.5598 2.28003C40.0298 2.28003 42.0298 4.29 42.0298 6.75Z"
            fill="#FF8676" className="invert" />
    </svg>
...

importing icons in destination component:

import {
    accountIco
} from '../../media/menuIcons.js';