全局更改图标

[Discourse]

这是一种全局更改 Discourse 图标的简单方法。

1. 右键单击要更改的图标，选择“检查元素”或“检查”（取决于浏览器）

2. 找到图标名称
   

   

3. 在此处搜索新图标 Find Icons with the Perfect Look & Feel | Font Awesome external-link-alt

4. 在 admin > customize > themes > edit code -> JS 选项卡中自定义并添加代码

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("link", "external-link-tab");
});

5. 必须将 Discourse 默认未使用的图标添加到站点设置 svg icon subset 中，然后强制刷新浏览器以查看应用更改。
   结果：
   
   所有“link”图标将被“external-link-tab”替换。
   如果图标在其他页面（如徽章）的多个元素中使用，该图标也将被替换。

---

例外情况

请注意，已经有一个主题组件允许您更改 Like 图标。我将此案例作为示例

用于点赞的“heart”图标与其他名称（'d-liked' 和 'd-unliked'）硬编码在一起，应与其他图标区别对待，因此要将 图标更改为 图标：

api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

但在徽章页面上，图标仍然是“heart”：

因此要更改该页面上的图标，我们添加：

api.replaceIcon("heart", "thumbs-up");

另一个示例：

api.replaceIcon("d-watching", "eye");

更改监视图标：

在此查看其他涵盖跟踪状态、展开/折叠、通知和当然还有点赞的例外情况。

const REPLACEMENTS = {
  "d-tracking": "bell",
  "d-muted": "discourse-bell-slash",
  "d-regular": "far-bell",
  "d-watching": "discourse-bell-exclamation",
  "d-watching-first": "discourse-bell-one",
  "d-drop-expanded": "caret-down",
  "d-drop-collapsed": "caret-right",
  "d-unliked": "far-heart",
  "d-liked": "heart",
  "d-post-share": "link",
  "d-topic-share": "link",
  "notification.mentioned": "at",
  "notification.group_mentioned": "users",
  "notification.quoted": "quote-right",
  "notification.replied": "reply",
  "notification.posted": "reply",
  "notification.edited": "pencil-alt",
  "notification.bookmark_reminder": "discourse-bookmark-clock",
  "notification.liked": "heart",
  "notification.liked_2": "heart",
  "notification.liked_many": "heart",
  "notification.liked_consolidated": "heart",
  "notification.private_message": "far-envelope",
  "notification.invited_to_private_message": "far-envelope",
  "notification.invited_to_topic": "hand-point-right",
  "notification.invitee_accepted": "user",
  "notification.moved_post": "sign-out-alt",
  "notification.linked": "link",
  "notification.granted_badge": "certificate",
  "notification.topic_reminder": "far-clock",
  "notification.watching_first_post": "discourse-bell-one",
  "notification.group_message_summary": "users",
  "notification.post_approved": "check",
  "notification.membership_request_accepted": "user-plus",
  "notification.membership_request_consolidated": "users",
  "notification.reaction": "bell",
  "notification.votes_released": "plus",
  "notification.chat_quoted": "quote-right",
};

参考：discourse/icon-library.js at main · discourse/discourse (github.com)

---

欢迎创建其他主题组件并在我们的 Customization > Theme component 类别中分享！

---

本文档受版本控制 - 在 github 上建议更改。