Iconos alternativos

Documentación Guías para desarrolladores
,
1

Por defecto, Discourse incluye iconos de la excelente biblioteca FontAwesome. Sin embargo, existen muchas bibliotecas de iconos de uso gratuito. Este tema es el hogar de los conjuntos de iconos alternativos. Enumera algunos componentes de tema que puedes probar ahora, pero también describe cómo puedes contribuir para que Discourse admita otros conjuntos de iconos.

Conjuntos de iconos alternativos

Si te interesa probar un conjunto de iconos diferente, aquí tienes una lista de componentes de tema que puedes probar:

(Consulta Cómo instalar un tema o un componente de tema para obtener ayuda para incorporar uno de estos repositorios en tu sitio de Discourse.)

Estos componentes están en desarrollo. Puedes usarlos, pero ten en cuenta que no todos los iconos del núcleo tendrán un reemplazo adecuado. (Aunque se aceptan contribuciones, ver abajo.)

Algunas capturas de pantalla:

image
image1824×1158 41.6 KB

Iconos Feather (usando el esquema de colores WCAG Dark)

image
image1926×1282 41.8 KB

Heroicons (usando el esquema de colores WCAG Light)

image
image1732×1256 42 KB

Unicons (usando el esquema de colores Grey Amber)

image
image1726×1256 43.1 KB

Phosphor Duotone (usando el esquema de colores WCAG Light)

Contribuciones

Desarrolladores y diseñadores de temas, esta sección es para ustedes.

Los componentes enumerados anteriormente se generan utilizando el repositorio de utilidades discourse-alt-icons, que agiliza la sustitución de iconos en el núcleo de Discourse por iconos de otros conjuntos de iconos de código abierto. El corazón del repositorio es un script de compilación que genera un componente de tema a partir de un archivo JSON con mapeos de nombres de iconos.

Se aceptan y fomentan las contribuciones. Discourse utiliza muchos iconos de FontAwesome y encontrar coincidencias en otros conjuntos de iconos es una tarea divertida, pero que consume mucho tiempo. Si deseas ayudar, puedes clonar discourse-alt-icons y seguir los pasos del archivo de lectura para agregar coincidencias para iconos que aún no las tengan.

Soporte para otros conjuntos de iconos

Por favor, utiliza las respuestas a continuación para proponer la adición de soporte para otro conjunto de iconos. O, aún mejor, con un poco de trabajo, puedes enviar una solicitud de extracción (pull request) al repositorio discourse-alt-icons. Ten en cuenta que solo se considerarán conjuntos de iconos con licencias muy permisivas (es decir, que deben permitir la modificación, la distribución y el uso privado).

Este documento está bajo control de versiones - sugiere cambios en github.

30 Me gusta
Harmonizing Discourse icons and emojis
2

Si alguien está buscando contribuir con un conjunto de iconos pero no tiene uno en mente:

Con licencia MIT, diseñado por el equipo de tailwindlabs.com

4 Me gusta
3

Espero que esto ayude, aquí hay algunos iconos que puedes usar

https://www.flaticon.com/

4

Buena sugerencia, lo agregué y actualicé el mensaje original con una captura de pantalla. No tiene muchos iconos; por ejemplo, no tiene iconos para la barra de herramientas del editor, pero los que sí tiene son bastante agradables. ¡Gracias!

2 Me gusta
5

¿Esto significa que Google Fonts queda descartado?

6

La licencia de Material Icons de Google es lo suficientemente permisiva. Sin embargo, su repositorio es gigantesco y podría llevar mucho tiempo encontrar la ruta de cada icono.

1 me gusta
7

Sí, pero una vez que se haya hecho, no tendrás que volver a hacerlo. :slight_smile:

1 me gusta
8

¿Por casualidad, podríamos obtener también los iconos Phosphor Regular?

2 Me gusta
9

Con un poco de trabajo, usted (o cualquiera realmente) debería poder crear un repositorio Regular de Fósforo a partir del dúo. Estaré encantado de revisarlo e incluirlo en la lista aquí si tenemos un repositorio.

2 Me gusta
10

Eso sería increíble. Deberíamos tener por defecto una lista de conjuntos de iconos en /admin, ya que los de FontAwesome son un poco feos. :ok_man:

11

La fealdad es cuestión de gustos. Pero hoy en día, la oferta de iconos gratuitos de Font Awesome está realmente limitada.

Por otro lado, ¿cuántos iconos realmente lucen? :joy:

13

Parece que cuando cargamos uno de esos conjuntos, los iconos que faltan no se reemplazan por los iconos predeterminados de Font Awesome, por lo que simplemente queda en blanco, no es muy utilizable… :thinking:

Me gusta el conjunto de feather, pero le faltan muchos iconos útiles.

He hecho una PR en el repositorio. Algunos cambios están lejos de ser perfectos, pero un icono malo sigue siendo mejor que ningún icono :smiling_face_with_tear:

Aquí están todos los iconos recién añadidos (página con código de ambiente deficiente, columna de “alternativas” desactualizada)
https://canapin.dev/discourse/feather-icons/

Cambios principales y no tan buenos:

image
La tarjeta de crédito es la más parecida a la tarjeta de dirección en términos de formas. Otras alternativas podrían ser un libro cerrado o abierto…

image
El mejor es la mira (crosshair), creo. Un bolígrafo simple tiene una forma bastante similar, pero es un bolígrafo, y además ya se usa para las ediciones.

image
Nada parecido. En mi opinión, el que mejor encaja es el icono de la CPU. Me equivoqué en mi PR y usé el icono de Zap, así que enviaré otra PR para solucionarlo.

2 Me gusta
14

Acabo de notar los iconos de Lucide:

Este es un fork de Feather, que está actualizado. Feather solo tiene 287 iconos, Lucide tiene 1701 (y por supuesto, tienen la mayoría, si no todos los iconos que faltan).

Ambos conjuntos están bajo la licencia MIT.

Así que supongo que en este caso se debería eliminar el soporte para Feather y reemplazarlo por Lucide.

Mi pull request parece un poco sin sentido ahora :lolsob:

Quizás pueda intentar crear un repositorio para este conjunto, si el equipo lo aprueba…

3 Me gusta
15

Irrelevante, pero al ir a https://canapin.dev, desplazarse hasta el final y hacer clic en el foro de Virtualmin, ¡era Discourse :discourse:!

1 me gusta
16

He creado casi todo el conjunto de iconos Lucide para Discourse, pero ¿dónde puedo encontrar la lista completa de iconos utilizados por el núcleo de Discourse para no omitir ninguno?

Esta plantilla discourse-alt-icons/mappings/template.json at main · discourse/discourse-alt-icons · GitHub no incluye algunos. Un único ejemplo, la paleta

17

podría ayudarte.

Los complementos y componentes pueden agregar iconos adicionales. No estoy seguro de cómo encontrar los populares allí. Podría tener sentido mirar los complementos que están included-in-core. Por lo que buscar algo como Repository search results · GitHub podría funcionar.

1 me gusta
18

Aquí está el repositorio:

Siéntete libre de hacerlo oficial.

Font-Awesome

image
image2560×1271 258 KB

Lucide

image
image2560×1271 265 KB

3 Me gusta
19

¿Es posible añadir otros iconos en la configuración? Parece que faltan los iconos de periódico, micrófono y mando de videojuegos.

20

Claro. También necesito arreglar el icono de font-size desde el compositor.

Edición: Puede que haya entendido mal, y no estoy seguro de que podamos reemplazar los iconos de Discourse de un nuevo conjunto fuera del componente :thinking:

1 me gusta
21

Vaya,

Para obtener una lista completa de los iconos incluidos en Discourse, ve a /styleguide en tu instancia de Discourse.

De GitHub - discourse/discourse-alt-icons · GitHub

Supongo que eso es lo que me hace la IA, ya ni siquiera leo el manual :person_facepalming:

No los encuentro en /styleguide ni en discourse/lib/svg_sprite.rb at main · discourse/discourse · GitHub. ¿Dónde se usan en Discourse?

3 Me gusta