在Laravel React应用程序中使用Ionicons 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

我发现I icons/icons/index.js文件中列出了base64文件。导入它意味着导入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}/>
    </>
  )
})