# 分类图标

**URL:** <https://meta.discourse.org/t/category-icons/104683>\
**Category:** Theme component\
**Tags:** official, deprecated, category-icons\
**Created:** [2018年十二月19日 16:22 UTC](https://meta.discourse.org/t/category-icons/104683 "2018-12-19T16:22:44Z")\
**Posts on this page:** 1\
**Showing post:** 227

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年九月21日 13:44 UTC](https://meta.discourse.org/t/category-icons/104683/227 "2024-09-21T13:44:54Z")

</div>

请按照此指南创建一个具有正确格式的 SVG 文件：

> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \<svg\> tag contents from the original SVG icon file into \<symbol\> …

在您的情况下，它将是这样的：

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="my-icon-id" viewBox="0 0 1024 1024" fill="none">
        <path fill="currentColor" d="M768.487 554.422H553.554v214.926c0 106.838 86.61 193.437 193.442 193.437h21.491c106.832 0 193.432-86.603 193.432-193.437v-21.492c.002-106.83-86.606-193.434-193.432-193.434m-515.842 0c-106.83 0-193.435 86.61-193.435 193.434v21.492c0 106.838 86.606 193.437 193.435 193.437h21.494c106.83 0 193.432-86.603 193.432-193.437V554.422zm21.498-494.346H252.65c-106.835 0-193.44 86.606-193.44 193.442v21.492c0 106.825 86.607 193.431 193.44 193.431h214.926V253.518c.002-106.836-86.604-193.442-193.432-193.442m494.344 0h-21.491c-106.836 0-193.442 86.606-193.442 193.442V468.44h214.933c106.832 0 193.432-86.606 193.432-193.431v-21.492c.002-106.836-86.606-193.442-193.432-193.442m0 0"/>
    </symbol>
</svg>

```

确保：

- 插入 `fill="currentColor"`
- 上传的 SVG 文件名使用 SCSS 变量 `icons-sprite`。

结果：  
 ![image](https://global.discourse-cdn.com/meta/original/4X/7/8/d/78df1132a74a58e648e5040b1e35ff578e92a968.png)

---

_[View the full topic](https://meta.discourse.org/t/category-icons/104683)._