Installing and using in NPM and webpack

[Kosmin]

Hi Guys, first of all thank you for an awesome repo!

Second of all I'm having some serious issues getting icons to work under npm. I've tried

import { add } from 'ionicons/icons';
import { IonIcon } from 'ionicons/dist';

...
<IonIcon icon={add} />

I know the docs say in IonicFramework to use <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>, but what's the alternative if I'd like to use import ... ? I'm sure it's something very simple but after looking at the source code for a few hours I'm drawing a blank. Also I've tried:

import 'ionicons/dist/ionicons.js';
...
<ion-icon name='add' />

And still nothing

Can you please help me use IonIcons in NPM with imports?

[joezappie]

So it took quite a bit of digging through the code but I found out how to use ionicons with the import instead of including a script tag. The following worked for me:

import { defineCustomElements } from "ionicons/dist/loader";
defineCustomElements(window);

If you're trying this from the browser it might be a good idea to use their polyfill function but I didn't try this so cant guarantee its correct:

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

I'm using my own SVGs only, but I think in webpack you'd have to set it up to copy the icon files into your build output, hence the option for resourcesUrl.

Would be nice if this was documented in the readme with how to use ionicons with import instead of the script tag.

[arthurgailes]

In case it helps others, I solved this like so:

import { add } from 'ionicons/icons';

And then instead of assigning the directly as a string, I use a javascript object.
document.querySelector("#mydiv").innerHTML = add;

[haivala]

It is illegal to use unpkg in Europe: https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/

Can we please get official NPM import documentation?

[glaszig]

5 years...

[christian-bromann]

consolidated into #1448