ionic-team/ionicons

Type string is not assignable to type InferPropType<StringConstructor>

Open

#1096 opened on Aug 24, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (17,256 stars) (2,083 forks)batch import
help wantedtype: documentation

Description

I'm using Vue3 with TypeScript:

import { IonIcon } from "@ionic/vue";
import { beer }from "ionicons/icons";

<ion-icon :icon="beer" />

but am getting this TypeScript warning: Type string is not assignable to type InferPropType<StringConstructor>

After some googling I still don't understand what this means. What is a StringConstructor type that the icon prop expects? My code is working but I don't like errors/warnings in my code.

Contributor guide

Tech stack
typescriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic TypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the IonIcon component's icon prop type definition in the Ionic Vue package. The error suggests that the prop expects a type of InferPropType<StringConstructor>, but the actual value passed is a string. Look at the type definition in the source code (e.g., in the ionicons or @ionic/vue package) to see if there's a mismatch or if a type assertion is needed. Check related issues or comments for a known fix.