ionic-team/ionicons

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

Open

#960 ouverte le 16 avr. 2021

Voir sur GitHub
 (5 commentaires) (9 réactions) (0 assignés)TypeScript (17 256 stars) (2 083 forks)batch import
help wanted

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

Stack technique
typescriptweb components
Domaine
frontend
Type d'issue
feature
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.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Understanding of Shadow DOMFamiliarity with CSS partsIonIcons component structure
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70
Direction de recherche
To implement this feature, locate the icon component's template in the IonIcons source code, specifically the file referenced in the issue (src/components/icon/icon.css and related tsx/html). Add the part='svg' attribute to the SVG element inside the component's shadow DOM. Ensure that the change does not break existing functionality and that the SVG is properly exposed for external styling via CSS part selectors. Test with a custom SVG icon to verify that the part attribute is applied and styling works.