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 个赞

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 图像,子集外的图标

如果您引用图像,该组件将不执行任何操作,因为没有包装器(并且图像将被转换为 markdown,从而生成一个没有任何类的图像)

1 个赞

这是否意味着我需要在我的主题中有一个 settings.yml 文件,其中包含 svg_icons 字段?或者我可以使用任何已启用主题组件中可用的 svg_icons 字段?如果是这样,将此字段添加到此主题组件是否有意义?

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

因为根据我的经验,SVG 图标会被转换为 <img /> 标签,并且在更改配色方案时它们不会继承 currentColor

请比较“示例”段落:

2 个赞

暗模式下的渲染能否得到增强?

希望拥有与界面相同的颜色:

3 个赞