图标

概述

图标包可以从社区集市下载或者手动安装。

社区集市

• 在 设置​ - 外观​ - 集市​ - 图标​ 中在线浏览社区开发者贡献的图标
• 选择所需图标在线安装或者更新

手动安装

1. 获取图标并解压
2. 设置 - 外观 - 图标 - 打开图标文件夹
3. 将图标拷贝到该文件夹中
4. 重启后在 设置 - 外观 - 图标 中选择安装好的图标

开发

步骤

1. 为你的图标取一个好听的名字，如 alice
2. 设置 - 外观 - 图标 - 打开图标文件夹
3. 在打开的文件夹中新建文件夹 alice​，在 alice​ 中新建 icon.js​ 和 icon.json​ 文件icon.json​，具体示例请参考 github repo: siyuan-note/icon-sample
4. 打开 icon.js 文件，贴入制作完成的图标
5. 重启 设置 - 外观 - 图标 中选择安装好的图标

图标的制作

• 使用浏览器打开图标文件夹中的 index.html​ 文件

• 根据图标名称和形状制作相似的图标

  • 前往 Iconfont 搜索中意的图标，下载 SVG 格式
  • 使用矢量图工具自行制作 SVG 格式的图标
  • 前往 pngtosvg 将图片转换为 SVG 格式

• 前往 IcoMoon App 制作 icon.js​

  • 点击右上角的 Import Icons​ 导入上一步制作好的图片
  • 选中图标并生成 SVG
    
  • 修改大小并下载
    
  • 修改 <symbol id="iconMarkdown" viewBox="0 0 32 32">​ 中的 id​ 为 index.html​ 对应的图标名
  • 将 ​<defs>...</defs>​ 中的内容替换到 icon.js​ 中对应的位置

• 测试

  • 将 index.html​ 中 material​ 替换为 alice​

    <script src="material/icon.js"></script>
    

  • 刷新 index.html​ 查看最终效果

  • 打开思源在 设置 - 外观 - 图标 中选择开发完成的图标进行查看

上架图标集市

请参考社区集市仓库。