在Laravel反应应用程序中使用Ionicon 5

Question

>我尝试使用 CDN 并且 CDN 工作正常，但我想从节点模块中使用它，当我尝试这样做时：

import 'ionicons/dist/ionicons';

我在控制台中收到此错误：

Loading module from “http://localhost:3000/js/ionicons/ionicons.esm.js” was blocked because of a disallowed MIME type (“text/html”).

由于错误很明显，并且文件未从节点模块提供。 我能够导入 SVG 图像，但由于我无法将颜色更改为 SVG 图像。我确实想要我的脚本中的js模块。

Answer 1

我发现 base64 文件列在 ionicons/icons/index.js 文件中。导入它意味着导入base64图像，这将使更改颜色变得困难，一个选项是遮罩，但我需要一种简单的方法，可以轻松更改颜色，因此 我做了一个简单的黑客。到目前为止，我找不到任何其他方法，但这有效。

制作组件并替换 base64 图像文件，以便我只能获得 SVG 标记

import React from 'react'
export default function IonIconComponent(props) {
let icon = props.icon.replace("data:image/svg+xml;utf8,","");
return (
<div className="ion-icon-container">
<div className="icon-inner" dangerouslySetInnerHTML={{__html:icon}}/>
</div>
)
}

现在我可以在需要的地方使用相同的组件

import {createOutline} from 'ionicons/icons/index';
export const ActionComponent = withRouter((props) => {
const data = props;
return (
<>
<IonIconComponent icon={createOutline}/>
</>
)
})