Icono de Discourse

:discourse2: Summary Discourse Icon allows you to use icons from your SVG icon subset in a post.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-icon
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Usage:

[wrap=icon id=square][/wrap]

Example:
This is the icon and the icon.

This is the [wrap=icon id=far-square][/wrap] icon and the [wrap=icon id=pencil][/wrap] icon.

Note: if the icon doesn’t show it’s because it’s not in your subset. If you are admin you can add it in your site settings: svg icon subset.


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @kelv 2025-04-28T07:23:04Z

Last checked by @Muhammed_EKİCİ 2024-12-02T09:46:54Z

Check documentPerform check on document:
31 Me gusta

Awesome! This is iconic!

(meta has many many themes, but luckily thanks to @kris.kotlarek we have an add to all themes button… got to sort out progress there, cause it takes a while to do its magic)

13 Me gusta

Yes didnt want to add to all for now, as I just finished coding it :grin: but will do now

Edit: oh already done

10 Me gusta

Thanks, that’s super fun! :sunglasses:

I never got into BB script tags, nor have I hand-coded FontAwesome, so the practice of using an empty tag pair has always seemed strange to me. Is that by popular convention, or is there a webcraft reason for using tag pairs? Also, can they have stuff between them, does that affect the text?

3 Me gusta

There are multiple causes here.

First when I wrote the wrap BBCode feature, @sam explicitly asked to me support 3 formats:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

This is done to be consistent with our existing BBCode usage in Discourse.

I could have a better syntax as: [icon=times] but then it would have to be a plugin and not a theme component.

As an experimentation, I think it’s fine as it is today, and if people were to use it a lot, we could think of having a plugin do this with a more concise syntax.

Another idea I have had is to add an API to add autocompletes symbol in the composer just like we have fore users/categories/emojis… But I’m afraid this would be a nightmare with multiple components choosing their own symbol…

5 Me gusta

Oh! I need to add support for another bbcode and those) thought that I’d use this as a starting point, but you’re saying that the wrap stuff is handled in core, which explains why I can’t find how it’s handled by your theme component.

My current solution is to use the linked words component and an ugly regex, but I’m still struggling to add the necessary classes to the links.

3 Me gusta

Yes read this topic to know more:

4 Me gusta

Right I’ve looked at it a dozen times. And printed out the code for your component and stared at it for hours, trying to understand if the degree to which it’s javascript or ember that I don’t understand. I can’t add a [foo] tag without a plugin? Or can I some how replace wrap in your code with foo to cover my new bbcode?

1 me gusta

No you can’t. Because part of it is server side. If you want your own custom BBCode you will have to write a plugin and look at how wrap is implemented for example:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5 Me gusta

Thanks! It’s starting to make sense. I’ve not had this much trouble learning a new language since C++ and objective Pascal in 1990.

My current regex hack almost works. I’ll need to decide whether to go the plugin route or stick with my hack (and figure out how to add the classes).

At least now I understand why I can’t find that wrap in the theme component!

3 Me gusta

I can think of a few possible syntax layouts to add to the wrap plugin for this:

[wrap=foo /]
[wrap/=foo]

(mimicing XML’s self-closing tags) but those are both fairly ugly :confused:

Anyone got amazing ideas for something that looks okay?

3 Me gusta

yeh not a big fan of these :confused:

6 Me gusta

He encontrado un gran error…

Si usas un envoltorio de icono y luego resaltas la cita, la imagen resultante se agranda enormemente:

  • Usa un envoltorio de icono en una frase de una publicación. Por ejemplo: Este es un icono [wrap=icon id=far-check-square][/wrap]
  • Resalta el texto relevante y haz clic en ‘Citar’.
  • El icono se vuelve súper grande en el extracto citado.

Así es como se ve la sintaxis cuando se cita resaltado:

[quote="JammyDodger, post:1, topic:294, full:true"]
Este es un icono ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

Esta es una respuesta donde se vuelve masiva

Aunque citarlo usando la burbuja de diálogo en la barra de formato funciona bien.

4 Me gusta

¿Cómo puedes resaltar el icono de la cita? En mi sitio de prueba, el icono se omite.

No estoy seguro. Solo uso el ratón.

¿Qué navegador estás usando?

Usando el ratón, probé con Chrome y Firefox, y no pude seleccionar el icono. :thinking:


EDITAR:

Si envuelves un icono no disponible en el subconjunto actual, creará una imagen SVG en su lugar.
Luego, puedes citarlo.

1 me gusta

¿Puedes proporcionar un ejemplo? Tu captura de pantalla muestra una casilla de verificación marcada y no tengo problemas para seleccionarla en mi instancia de prueba (así como otros iconos que probablemente no usa Discourse como x-ray).

1 me gusta

Veo el problema. El componente busca comprobando si hay un contenedor con la clase d-wrap; pero no hay contenedor si el icono proporcionado no pertenece al subconjunto. Crea una imagen como SVG en su lugar.

Por ejemplo:

SVG, icono dentro del subconjunto

Imagen como SVG, icono no dentro del subconjunto

Si citas las imágenes, el componente no hace nada, ya que no hay contenedor (y la imagen se convierte a markdown, resultando en una imagen sin ninguna clase)

1 me gusta

¿Significa esto que necesito tener un campo svg_icons en settings.yml disponible en mi tema? ¿O podría usar cualquier campo svg_icons disponible de cualquier componente temático habilitado también? Y si ese es el caso, ¿tendría sentido añadir este campo a este componente temático?

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

Porque en mi experiencia, los iconos SVG se transforman en etiquetas <img /> y no heredan currentColor cuando se cambia el esquema de color:
Por favor, compara el párrafo Ejemplo:

2 Me gusta

¿Se podría mejorar la representación en modo oscuro?

Me encantaría tener los mismos colores que en la interfaz:

3 Me gusta