ionic-team/ionicons

Can you expose a part="svg" for the SVG content

Ouverte

#960 ouverte le 16 avr. 2021

Voir sur GitHubGuide contributeur
 (5 commentaires) (9 réactions) (0 personne assignée)TypeScript (2 083 forks)batch import
help wanted

Métriques du dépôt

Stars
 (17 256 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

When using it with custom icons : <ion-icon src="assets/icons/wifi.svg"></ion-icon> Because of the Shadow DOM we can't style at all the content of the SVG. Any custom SVG used is always a square because of the this css lines : https://github.com/ionic-team/ionicons/blob/8c2a507fcff2cb5f2edff60357ffd7feb70bb987/src/components/icon/icon.css#L27-L34 By adding a part="svg" it would be possible to have more flexibility to style the SVG from the outside. In my case setting height to auto, but it could be to change the color of a specific path or anything else.

Guide contributeur

Direction de recherche
Étudiez comment ajouter l'attribut CSS part à l'élément SVG dans le Shadow DOM du composant ion icon. Vérifiez les fichiers CSS et TypeScript existants de l'icône pour comprendre la structure, puis ajoutez part="svg" à l'élément SVG et mettez à jour les types en conséquence.
Stack technique
typescriptcsshtml
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
Shadow DOMCSS parts
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60