Repository navigation
Iconos de interfaz
El product icon theme reemplaza los iconos de la propia UI de VS Code por un conjunto propio: 58 glifos dibujados a mano que cubren la barra de actividad, el layout y la barra de título, la barra de estado, el árbol del explorador, pestañas y editor, paneles, acciones comunes y feedback.
Se sirven como 93 entradas de iconDefinitions, porque 35 codicons distintos comparten
dibujo con otro. Ocupan los codepoints \e900 a \e939 del Área de Uso Privado.
Actívalo desde la paleta de comandos con Preferences: Product Icon Theme →
Puelche.
Los iconos que no están cubiertos siguen usando el codicon nativo de VS Code, que siempre se verá mejor que un dibujo forzado.
Para que la mezcla no se note, la fuente usa las mismas métricas que el codicon nativo:
unitsPerEm 1000, ascender 1000, descender 0, la misma razón 1.0. Es lo que hace que un
glifo propio y un codicon no cubierto compartan línea base y tamaño dentro de la misma barra.
No se toca sin regenerar todo.
Una fuente no tiene trazo. svgicons2svgfont lee sólo geometría y descarta la pintura, así
que un stroke acabaría en un glifo vacío y un fill="none", en un borrón.
Por eso el dibujo se declara en primitivas — line, arc, ring, dot, rect,
fill — y scripts/stroke-outline.js devuelve el contorno ya relleno: winding nonzero,
aditivo en sentido horario, hueco en antihorario dentro del mismo d. Es lo que da la punta
y la junta redondas sin declarar un solo atributo de trazo.
El contrato del archivo de formas no cambió: PRODUCT_SHAPES[id] sigue siendo markup
<path d="..."/>.
Techo de 3 elementos visuales por glifo. A 16px nada más que eso se lee.
El lint que cobra test/icons.test.js sobre cada glifo:
- Sólo los comandos
M L Q A Z, y en mayúscula. - Sólo
<path>, ningún otro elemento. - Sin
transform. - Sin subcaminos de área aproximadamente cero.
- Todas las coordenadas dentro de 0..16.
data/product-codepoints.json fija el mapa id → codepoint y está commiteado.
Nunca reordenes ni borres una entrada. El número se reasignaría a otro dibujo, y cada usuario que tenga la fuente en caché vería el icono equivocado. Este es uno de los dos cambios del repositorio que rompe a gente que ya tiene la extensión instalada.
SVG 16x16 → svgicons2svgfont → svg2ttf → ttf2woff
Salida commiteada y publicada: themes/puelche-product-icons.json y
themes/puelche-product.woff.
npm run product:build # regenera el .woff y el product icon theme
npm run product:check # rehace y falla en el git diffEs determinista hasta el sha256: svg2ttf recibe un ts fijo, porque sin eso estampa
new Date() en la tabla head y cada corrida produce bytes distintos.
Los SVG de icons/product/** son material de trabajo: están en .gitignore y fuera del
.vsix. El artefacto publicado es sólo el .woff.
Marketplace · Repositorio · Issues · MIT