在Laravel React应用中使用Ionicons 5.

Posted 2023-01-14

我尝试使用CDN，CDN工作正常，但我想从node模块中使用它，当我尝试这样做。

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模块。

答案

我发现在ioniconsiconsindex.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/>
    </>
  )
)