时间戳

首页 > 解决方案 > 在 React 中是否有任何本地方法可以将导入的 SVG 渲染为带有地图功能的道具？

javascript - 在 React 中是否有任何本地方法可以将导入的 SVG 渲染为带有地图功能的道具？

问题描述

所以，我有几个 svg 文件和如下列表：

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
        },
    ]

然后我试图呈现一个组件列表，如下所示：

        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 现在只返回文件的路径。如何从我的文件中呈现内联 svg 标记？我在 svg 标记中有一些自定义类，所以，我不必使用img标记

标签： javascriptreactjssvg

解决方案

一种选择是将 SVG直接作为 React 组件导入。

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

第二种选择是直接创建一个组件，如下所示：

// 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>
);

推荐阅读