Question

我正在使用ReactJS应用程序，我有一些SVG格式的定制图标，因此我可以根据需要设置它们的样式，用于悬停，主题等。

我不能简单地将SVG代码放在主要组件中，而是必须从JSON文件中注入。主要是因为它将根据我需要的数量显示为转发器。

我的代码以这种方式完美运行：

{userRole.map((role, index) => (
    <div id={role.id} key={role.id}>
        <div>
            {role.name}
            <div className="role-icon">
                {role.icon}
            </div>
        </div>
    </div>
))}

//JSON FILE CODE

exports.userRoles = [
    {
        id: '1',
        name: 'Administrator',
        icon: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.35 94.22"><title>super-admin</title><path d="M78.25,53.94,66.58,86.6H87.11V64.07a10,10,0,0,0-6.82-9.5Zm0,0" transform="translate(-5.82 -16.67)"/><path d="M64,37A10.19,10.19,0,1,0,53.81,26.85,10.2,10.2,0,0,0,64,37Zm0,0" transform="translate(-5.82 -16.67)"/><path d="M47.71,54.57a10,10,0,0,0-6.82,9.5V86.6H61.42L49.75,53.94Zm0,0" transform="translate(-5.82 -16.67)"/><path d="M118,91.49H10A4.22,4.22,0,0,0,5.82,95.7v11A4.21,4.21,0,0,0,10,110.88H118a4.21,4.21,0,0,0,4.22-4.21v-11A4.22,4.22,0,0,0,118,91.49Zm0,0" transform="translate(-5.82 -16.67)"/><path d="M103.58,26.34a14.82,14.82,0,0,0-11-4.92H78.7a15.51,15.51,0,0,1,1,5.43,15.67,15.67,0,0,1-31.34,0,15.51,15.51,0,0,1,1-5.43H35.44A14.8,14.8,0,0,0,20.73,37.84L26,86.6H35.4V64.07A15.5,15.5,0,0,1,46,49.35l4.62-1.42A2.74,2.74,0,0,1,54,49.62L64,74.8,74,49.62a2.74,2.74,0,0,1,3.38-1.69L82,49.35A15.5,15.5,0,0,1,92.6,64.07V86.6H102l5.31-48.76a14.84,14.84,0,0,0-3.69-11.5Zm-35.91,22-2.14,3.22,1,8.44-2,5.23a.59.59,0,0,1-1.12,0l-2-5.23,1-8.44-2.14-3.22a1.85,1.85,0,0,1,.24-2.18,1.94,1.94,0,0,1,1.43-.6h4a1.94,1.94,0,0,1,1.43.6,1.85,1.85,0,0,1,.24,2.18Zm0,0" transform="translate(-5.82 -16.67)"/></svg>,
    },
    {
        id='2',
        name='user',
        icon= '<svg>...</svg> ',
    },
    {
        id='3',
        name='tester',
        icon= '<svg>...</svg> ',
    }
    ... you get the idea
];

现在，我想要完成的是将所有svg代码放在各自的文件中并在JSON中使用它。也许是这样的事情

exports.userRoles = [
    {
        id: '1',
        name: 'Administrator',
        icon: admin.svg,
    },
    {
        id='2',
        name='user',
        icon= user.svg,
    },
    {
        id='3',
        name='tester',
        icon= tester.svg',
    }
    ... you get the idea
];

p.s ..我知道我可以在<img src={icon} />中使用svg但是，我需要保留SVG属性，以便我可以相应地设置它。所以它不能用作图像

我该怎么做？将我的SVG代码保存在各自的文件中，使用JSON行中的文件和路径名，这样我就可以在我的JSX代码中调用它并将其呈现为SVG HTML代码？

提前致谢

Answer 1

我建议采用略有不同的方法。你可以为每个svg创建一个组件（我在下面给你看了一个例子）。然后，在映射函数中，您可以根据JSON中设置的值选择要显示的组件。

SVG组件：

import React, {Component} from 'react';

export default class UserIcon extends Component{
    render(){
        return (
            <svg xmlns="http://www.w3.org/2000/svg" version="1" width="128" height="128">
                <g>
                    <path fill={this.props.fill} d="M109.3 55.5h-36l12-12a29.5 29.5 0 0 0-49.6 12h-17A46 46 0 0 1 97 31.8l12.3-12.3v36zm-90.5 17h36l-12 12a29.5 29.5 0 0 0 49.5-12h17A46 46 0 0 1 31 96.2l-12.4 12.3v-36z"/>
                    <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1280ms" repeatCount="indefinite"/>
                </g>
            </svg>
        )
    }
}

UserIcon.defaultProps = {  
    "fill": "#ffffff88"  
}

选择正确的图标

renderIcon(icon){
    if(icon == 'user'){
        return <UserIcon>
    }else if(icon == 'admin'){
        return <AdminIcon>
    }
    // etc.
}

{userRole.map((role, index) => (
    <div id={role.id} key={role.id}>
        <div>
            {role.name}
            <div className="role-icon">
                {this.renderIcon(role.icon)}
            </div>
        </div>
    </div>
))}

Answer 2

你使用webpack吗？您可以使用svg-inline-loader [https://github.com/webpack-contrib/svg-inline-loader]

来实现它

在JSON文件中使用SVG作为文件而不是代码

2 个答案: