目 录CONTENT

文章目录

1.2.5.[Obsidian][插件][界面]图标

克林空间
2024-01-30 / 0 评论 / 0 点赞 / 140 阅读 / 887 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2024-01-30,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Obsidian API 中的一些用户界面组件可让您配置一个附带图标。您可以选择内置图标,也可以添加自己的图标。

浏览可用图标

浏览 lucide.dev 查看所有可用图标及其相应名称。

请注意:目前仅支持版本 0.171.0 以下的图标。

使用图标

如果想在自定义界面中使用图标,可使用 setIcon() 实用程序函数为 HTML element 添加图标。下面的示例为状态栏添加了图标:

import { Plugin, setIcon } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    const item = this.addStatusBarItem();
    setIcon(item, "info");
  }
}

要改变图标的大小,可在包含图标的元素上使用预设尺寸设置 --icon-size CSS 变量:

div {
  --icon-size: var(--icon-size-m);
}

添加自己的图标

要为插件添加自定义图标,请使用 addIcon() :

import { addIcon, Plugin } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    addIcon("circle", `<circle cx="50" cy="50" r="50" fill="currentColor" />`);

    this.addRibbonIcon("circle", "Click me", () => {
      console.log("Hello, you!");
    });
  }
}

addIcon 需要两个参数:

  1. 唯一标识图标的名称。
  2. 图标的 SVG 内容,不包括周围的 <svg> 标签。

请注意,您的图标必须在 0 0 100 100 视图框内才能正确绘制。

调用 addIcon 后,您可以像使用任何内置图标一样使用该图标。

图标设计指南

为了与Obsidian界面兼容并保持一致,您的图标应遵循 Lucide’s guidelines

  • 图标必须在 24 x 24 像素的画布上设计
  • 图标必须在画布内至少有 1 个像素的填充
  • 图标的笔画宽度必须为 2 像素
  • 图标必须使用圆形连接
  • 图标必须使用圆帽
  • 图标必须使用居中的笔画
  • 图标中的形状(如矩形)的边框半径必须为 2 像素
  • 不同元素之间必须有 2 个像素的间距

Lucide 还为 Illustrator、Figma 和 Inkscape 等矢量编辑器提供templates and guides 。

0

评论区