ionic-team/ionicons

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

Open

#960 aberto em 16 de abr. de 2021

Ver no GitHub
 (5 comments) (9 reactions) (0 assignees)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.

Guia do colaborador

Pilha de tecnologia
typescriptweb components
Domain
frontend
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Understanding of Shadow DOMFamiliarity with CSS partsIonIcons component structure
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70
Direção de pesquisa
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.