[Stencil] How to import exactly two v4 ionicons into a Stencil component?

Stencil
1

I’m designing a Stencil component with Ionicons v4. Based on a condition, I’d like to either draw ionicon A or ionicon B. I’d like to ensure the component only imports those two ionicons. I have ionicons as a collection in stencil.config.js, and the component works correctly (though I haven’t built for production yet). Critical code is:

Inside render function:

{starCounter.map((_, currentIndex) => <ion-icon name={this.iconName(currentIndex + 1)} 
                                                onClick={_ => this.updateRating(currentIndex + 1)}
                                                style={{'font-size': fontSizeExpression}}>
                                      </ion-icon>)}

And the iconName function:

iconName(starNumber: number): string {
    const threshold = this.currentRating - starNumber;
    if (threshold >= 0) { return 'star'}
    else { return 'star-outline' };
  }

Is the compiler smart enough to know that it only needs “star” and “star-outline”? Do I need to declare that in some way? Should I alter the code? I would like to end up with as lightweight a component as possible.

@manucorporat sorry for tagging you here, but my guess is not a lot of people know the answer to this yet, so if you could ask someone on the team to take a look if I don’t get an answer otherwise, I’d appreciate it, thanks.

1 Like
2

Let us know if components built by stencil.js are indeed faster, better than Angular 5 components.
If so, I might jump in and transplant my current project into stencil & capacitor combo.

Ideally you can test it on smartphones

3

It promises to be way better, at least in this particular case. I’m rebuilding my star-rating component in Stencil. One weakness in the ionic-angular version is that you have to import all ionicons if you want to use any of them. If I build this correctly, I should only need two ionicons, and nothing from ionic-angular. So the component will be much lighter, and can be used by any framework.

That’s the idea anyway. But the rubber is meeting the road, and I think I’ve pushed past where the documentation currently is.

2 Likes
4

To be honest. I never use ion icons.
The best method I found is creating your own font file which has SVG icons.

Check this out:
https://icomoon.io/app/

You can import any PNG, SVG file as a part of font on their online app. Icomoon can then export the collection as a font file which you can use on Ionic (angular)'s SCSS file.
This is how I get unique icons… there are countless amount of free SVG icon files you can find online.
and the font file can be used with custom selector like ion-icon… you can name it whatever you want in SCSS.

So stencil.js doesn’t come with Icons to reduce size… that’s good.

5

I James,

I used icomoon with V3 but I can’t make a mixin makeIcon with v4

@mixin makeIcon($arg, $val) {
.icon-#{$arg}:before,
.ion-ios-icon-#{$arg}:before,
.ion-ios-icon-#{$arg}-outline:before,
.ion-wp-icon-#{$arg}:before,
.ion-wp-icon-#{$arg}-outline:before,
.ion-md-icon-#{$arg}:before,
.ion-md-icon-#{$arg}-outline:before {
content: #{’"\’ + $val + ‘"’};
font-size: 0.7em;
}
}

Can I see your scss please?