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

@AaronSterling wrote:

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.

Posts: 1

Participants: 1

Read full topic