FlatPaper 主题在 layout/_partial/icons.ejs 里以内联 SVG 的形式提供了一组图标,模板里通过 partial('_partial/icons', { icon: 'name' }) 调用。文章正文里也能用——Markdown 支持直接嵌入 <svg>,把对应名称的 SVG 复制粘贴即可。
如何在文章中使用
把对应图标的 <svg> 整段贴到 Markdown 里就行,颜色会跟随当前文字色(currentColor),大小可以改 width / height。
描边风格(Lucide)模板:
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" |
填充风格(Simple Icons 品牌)模板:
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" |
图标一览
下面每个小卡片下方是该图标在 iconMap / icons.ejs 中的名称(别名用 / 分隔)。
站点导航
方向与关闭
时间与状态
内容与归档
交互与通信
订阅
品牌(描边风格)
github 和 twitter 是 Lucide 早期版本里的描边式品牌图标,目前仍保留在 icons.ejs 中。
品牌(填充风格 · Simple Icons)
新版 Twitter(X)以及其他常见平台来自 Simple Icons(CC0),使用 fill="currentColor"。
调整尺寸与颜色
- 大小:改
<svg>的width/height。也可以直接给容器 CSS 设font-size,配合width="1em"/height="1em"跟随字号缩放。 - 颜色:
stroke(描边)和fill(填充)都设成了currentColor,会自动跟随当前文字色。想强调时,包一层带style="color: var(--green-deep)"的容器即可。 - 行内对齐:放在行内文字旁会基线偏移,可加
style="vertical-align: -2px"。
想要更多图标?
- 描边风格的图标可以去 Lucide 浏览,复制 SVG 后保留
fill="none" stroke="currentColor"等属性即可贴入文章。 - 品牌 Logo 推荐 Simple Icons(CC0),使用
fill="currentColor"。 - 想线条风格的品牌 Logo,可去 Tabler Icons 找
brand-*系列。
如果你希望某个图标变成主题”内置”图标(可以通过 partial('_partial/icons', { icon: 'name' }) 调用,或在 social 配置里通过键名自动匹配),直接在 themes/flatpaper/layout/_partial/icons.ejs 的 switch 里新增一个 case 即可。
评论