ionic-team/ionicons

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

Aberta

#960 aberto em 16 de abr. de 2021

Ver no GitHubGuia do colaborador
 (5 comentários) (9 reações) (0 responsável)TypeScript (2.083 forks)batch import
help wanted

Métricas do repositório

Stars
 (17.256 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Direção de pesquisa
Investigue como adicionar o atributo CSS part ao elemento SVG dentro do Shadow DOM no componente ion icon. Verifique os arquivos CSS e TypeScript do ícone existentes para entender a estrutura, adicione part="svg" ao elemento SVG e atualize os tipos conforme necessário.
Pilha de tecnologia
typescriptcsshtml
Domain
frontend
Tipo Issue
Funcionalidade
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.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
Shadow DOMCSS parts
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60