Using Ionicons 5 in Laravel React Application

Question

I tried using CDN and CDN works fine but I want to use it from node modules and as I try to do this:

import 'ionicons/dist/ionicons';

I get this error in my console:

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

As the error is obvious and file is not being served from node modules. I was able to import SVG image but since I cannot change color to SVG image. I do want js modules in my script.

score 0 · Answer 1 · answered Jun 16 '20 at 08:20

I found base64 files listed inside of ionicons/icons/index.js file. Importing it means importing base64 image which would make changing color difficult , an option would be masking but i needed a simple way where i could change color easily so i did a simple hack.I couldn't find any other way as of now , but this works.

making a component and replacing base64 image files such that i would only get svg markup

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>
    )
}

now i can use this same component wherever i need

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

Using Ionicons 5 in Laravel React Application

1 Answers1