0

我尝试使用 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 模块。

4

1 回答 1

0

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

制作一个组件并替换 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}/>
    </>
  )
})
于 2020-06-16T08:20:18.720 回答