Discourse Icon

: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

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

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

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

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

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

Yes read this topic to know more:

「いいね!」 4

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

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

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

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

yeh not a big fan of these :confused:

「いいね!」 6

大きなバグを見つけました…

アイコンラップを使用し、その後引用をハイライトすると、結果の画像が大幅に拡大されます。

  • 投稿内の文にアイコンラップを使用します。例:これはアイコンです [wrap=icon id=far-check-square][/wrap]
  • 関連するテキストをハイライトして「引用」します。
  • 引用された抜粋でアイコンが非常に大きくなります。

ハイライト引用したときの構文は次のようになります。

[quote="JammyDodger, post:1, topic:294, full:true"]
これはアイコンです ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

これが巨大になる返信です

ただし、フォーマットバーの吹き出しを使用して引用すると、問題なく機能します。

「いいね!」 4

アイコンをどのように引用してハイライト表示できるのですか?私のテストサイトでは、アイコンがスキップされます。

よくわかりません。マウスを使っています。

お使いのブラウザは何ですか?

マウスを使って、ChromeとFirefoxでテストしましたが、アイコンを選択できませんでした。:thinking:


編集:

現在のサブセットで利用できないアイコンをラップすると、代わりにSVG画像が作成されます。
その後、それを引用できます。

「いいね!」 1

例を教えていただけますか?あなたのスクリーンショットはチェックマークが付いたチェックボックスを示しており、私のテストインスタンスでそれ(おそらくDiscourseで使用されていないx-rayのような他のアイコンも)を選択するのに問題はありません。

「いいね!」 1

問題がわかりました。コンポーネントは、d-wrap クラスを持つラッパーがあるかどうかを見て検索しますが、提供されたアイコンがサブセットに含まれていない場合、ラッパーがありません。代わりにSVGとして画像を作成します。

例:

SVG、サブセット内のアイコン

SVGとしての画像、サブセット外のアイコン

画像を引用すると、ラッパーがないため(画像はクラスのない画像に変換されるマークダウンに変換される)、コンポーネントは何も行いません。

「いいね!」 1

これは、テーマで利用可能な settings.ymlsvg_icons フィールドが必要であることを意味しますか?それとも、有効になっているテーマコンポーネントから利用可能な任意の svg_icons フィールドを使用できますか?また、その場合、このフィールドをこのテーマコンポーネントに追加するのは理にかなっていますか?

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

私の経験では、SVGアイコンは <img /> タグに変換され、カラースキームが変更されたときに currentColor を継承しません。

の段落を比較してください。

「いいね!」 2

ダークモードでのレンダリングを強化できますか?

インターフェースと同じ色にしたいのですが:

「いいね!」 3