Discourse-Symbol

: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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

Yes read this topic to know more:

4 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

yeh not a big fan of these :confused:

6 „Gefällt mir“

Ich habe einen großen Fehler gefunden…

Wenn Sie eine Icon-Umhüllung verwenden und dann ein Zitat hervorheben, wird das resultierende Bild stark vergrößert:

  • Verwenden Sie eine Icon-Umhüllung in einem Satz in einem Beitrag. z. B. Dies ist ein Icon [wrap=icon id=far-check-square][/wrap]
  • Heben Sie den relevanten Text hervor und wählen Sie „Zitat“.
  • Das Icon wird im zitierten Auszug riesig.

So sieht die Syntax aus, wenn sie als Zitat hervorgehoben wird:

[quote="JammyDodger, post:1, topic:294, full:true"]
Dies ist ein Icon ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

Dies ist eine Antwort, bei der es riesig wird

Das Zitieren mit der Sprechblase in der Formatleiste funktioniert jedoch einwandfrei.

4 „Gefällt mir“

Wie können Sie das Symbol hervorheben? Auf meiner Testseite wird das Symbol übersprungen.

Ich bin mir nicht sicher? Ich benutze nur die Maus.

Welchen Browser verwenden Sie?

Mit der Maus habe ich es mit Chrome und Firefox getestet und konnte das Symbol nicht auswählen. :thinking:


EDIT:

Wenn Sie ein Symbol, das im aktuellen Subset nicht verfügbar ist, einpacken, wird stattdessen ein SVG-Bild erstellt.
Dann können Sie es zitieren.

1 „Gefällt mir“

Können Sie ein Beispiel geben? Ihr Screenshot zeigt ein angekreuztes Kontrollkästchen, und ich habe keine Probleme, es in meiner Testinstanz auszuwählen (ebenso wie andere Symbole, die wahrscheinlich nicht von Discourse verwendet werden, wie z. B. x-ray).

1 „Gefällt mir“

Ich sehe das Problem. Die Komponente sucht, indem sie prüft, ob ein Wrapper mit der Klasse d-wrap vorhanden ist; aber es gibt keinen Wrapper, wenn das bereitgestellte Symbol nicht aus dem Subset stammt. Stattdessen wird ein Bild als SVG erstellt.

Zum Beispiel:

SVG, Symbol innerhalb des Subsets

Bild als SVG, Symbol nicht innerhalb des Subsets

Wenn Sie die Bilder zitieren, tut die Komponente nichts, da kein Wrapper vorhanden ist (und das Bild in Markdown konvertiert wird, was zu einem Bild ohne Klasse führt).

1 „Gefällt mir“

Bedeutet dies, dass ich ein svg_icons-Feld in settings.yml in meinem Theme haben muss? Oder könnte ich jedes svg_icons-Feld verwenden, das von aktivierten Theme-Komponenten verfügbar ist? Und wenn das der Fall ist, wäre es sinnvoll, dieses Feld zu dieser Theme-Komponente hinzuzufügen?

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

Denn meiner Erfahrung nach werden die SVG-Icons in <img />-Tags umgewandelt und erben nicht die currentColor, wenn das Farbschema geändert wird:
Vergleichen Sie bitte den Absatz Beispiel:

2 „Gefällt mir“

Könnte das Rendering im Dark Mode verbessert werden?

Ich hätte gerne die gleichen Farben wie in der Benutzeroberfläche:

3 „Gefällt mir“