can't be used independently

[moebiusmania]

Hi guys, I was interested in this project but it seems that there are only 2 possible scenarios for using it:

1. within Ionic framework
2. as a script tag from unpkg

So using it as a standalone package within a regular Webpack based project seems unsupported since an npm install ... isn't even mentioned on the getting started.

I've tried to do it anyway (using https://www.npmjs.com/package/ionicons ) but every attempt to import the component didnt worked, I also tried to understand the dist folder to find any clue of a right import path... but nothing.

So I have a couple of questions now:

• is this intentional (not documenting the NPM package and import paths)?
• do you have any plans of supporting this kind of workflow for ionicons "standalone" package?

thanks

[moebiusmania]

also trying to inject the script tag via JS like this:

const script = document.createElement('script');
script.src = 'https://unpkg.com/ionicons@4.5.0/dist/ionicons.js';
document.head.appendChild(script);

results in a request of a ionicons/ionicons.yytg5gxf.js file from my domain and not Unpkg. So if you don't have access to the static HTML file is basically impossible to use to this library.

This can be fine, but please give a shout to tell us if this is the scope/intention of the project or if this is something you plan to fix in a near future.

Codebase is regularly updated but issues and PRs are being almost completely ignored, if you don't want to have this project as OSS please make it private or make clear statement somewhere.

thanks

[nicbarker]

If you're still interested, it's quite straightforward to import the icons individually using webpack + react. See my response here: https://github.com/ionic-team/ionicons/issues/648#issuecomment-457439060

[moebiusmania]

@nicbarker hi thanks for your reply, unfortunately my scenario doesn't involve React at all. The issue for me is regard using the package from NPM without undocumented workarounds in a vanilla project 😐.

[chawyehsu]

results in a request of a ionicons/ionicons.yytg5gxf.js file from my domain and not Unpkg. So if you don't have access to the static HTML file is basically impossible to use to this library.

I encouter the issue too, web component can not be used indepenently. The only way to use it is using the font icon by importing the font icon css.

[corysimmons]

Solution

• Figure out which ver of Ionicons you're using from Unpkg (look at the file you're importing)
• Find that version here: https://github.com/ionic-team/ionicons/releases
• Download the zip then unzip
• Find the fonts dir in there somewhere (depends on the ver, some vers have it in docs — "fonts for me not for thee" 🤪)
• Copy the fonts dir over to your project (preferably as a sibling to css)
• In that same unzipped archive, find ionicons.min.css and copy it to your project.

Where you put this file is important. By default you need this css file in a directory that is a sibling to your fonts directory.

You can tweak it in ionicons.min.css if you really want, but seems like a bad idea.

Basically, the only hard part was tracking down where they were hiding the font files. Otherwise just reverse engineer the css and pay attention to file locations... it's really easy.

Note: You will need to update all your <ion-icon name="person"></ion-icon> things to <i class="ion-md-person"></i> (or <i class="ion-ios-person"></i> if you want the Apple icons).

And another thing: The <ion-icon> webcomponent was auto expanding to fill available space and centering content, to replicate some of this functionality you can use this Sass:

[class*='ion-md-'] {
  &::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    background: hotpink; // just use for debugging
  }
}

Then you might have to resize a few icons (..a few to a lot)depending on how you sized them in the first place. No help here unless you want to add your own little javascript.

[moebiusmania]

closing due to the lack of interest from the developers of this package to maintain it as an Open Source project. Thanks to everyone else who proposed workarounds, but I was hoping in some feedbacks from the developers and eventually a real solution.

[Deckluhm]

closing due to the lack of interest from the developers of this package to maintain it as an Open Source project. Thanks to everyone else who proposed workarounds, but I was hoping in some feedbacks from the developers and eventually a real solution.

No response from developers doesn't mean they aren't interested, maybe that's just not their priority.

I have been using Ionicons for years (without using Ionic) and I'm also interested by an import way to use it.

I understand it's frustrating to have no response for almost 2 years but imo you should reopen this issue so it can be seen by core maintainers.

[moebiusmania]

@Deckluhm I appreciate your interest in the matter, but you can't say "it's just not priority" when you have clear evidence of the non-interest on this issue from the devs since (as you said) I didn't received any response in almost 2 years. If it was lower priority they could have commented just to say that may work on it in the future, or add a label or waiting for more request about it or whatever else to highlight the priority on the topic.

That's how open source work.

[YoungElPaso]

Gotta say I agree with @moebiusmania ; IMO portability should be the main selling point of using a web component here, yet, there's no documentation on how to do that without using the CDN which is a non-starter for a lot of projects (I can't use it for security reasons for example). It'd be great if these components were more open and easier to use, but its not encouraging to see the docs and the issues around that seemingly stalled for so long. 🤷