Obsidian 插件：Iconoir Icons

概述

一个用于创建和显示定制的 SVG Iconoir 图标的插件。

Readme(翻译）

下面是 iconoir-icons 插件的自述翻译

iconoir-icons

一个用于在 Obsidian 中创建和显示自定义 SVG Iconoir Icons 的插件。

特点

图标搜索建议

自定义 CSS 样式

语法

要触发图标名称建议界面，请连续按两次和号键（&&），然后开始输入查询。

图标组件的语法如下：

`~![ICON|COLOR|W|H|STYLE]`

分隔符是管道符号 `|`。

ICON   = 图标的名称，例如 iconoir-peace-hand
COLOR  = 图标的 CSS 颜色，例如 purple
W      = 图标的 CSS 宽度，例如 1em
H      = 图标的 CSS 高度，例如 1em
STYLE  = 图标组件的 CSS 规则，例如 float:right;

只有 ICON 名称是必需的。其他所有参数都是可选的，但不能留空。

`~![iconoir-peace-hand|purple|1em|1em|float:right;]`

请参阅 examples 目录以获取其他示例代码。

基本块

阿尔法 布拉沃 `~![iconoir-antenna|green|22px|22px]` 查理 德尔塔 `~![iconoir-wristwatch|red|22px|22px]` 伊科 福克斯特罗特 高尔夫 `~![iconoir-golf|green|22px|22px]` 酒店 印度 朱利叶特 基洛 `~![iconoir-airplane|red|22px|22px]` 利马 迈克 南尼亚 `~![iconoir-calendar|magenta|22px|22px]` 奥斯卡 帕帕 魁北克 罗密欧 西尔拉 `~![iconoir-compass|var(--color-orange)|22px|22px]` 坦戈 统一 维克多 `~![iconoir-dashboard-dots|red|22px|22px]` 惠斯基 克斯雷 燕克 奥斯卡

结果

`~![iconoir-leaf|green|48px|48px|float:right;]` lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi bibendum commodo congue. vivamus efficitur aliquam felis, id viverra eros blandit sit amet. nam feugiat purus ac sem aliquam, sit amet dictum dui bibendum. sed tincidunt porttitor odio at feugiat. cras sed viverra libero. suspendisse potenti. nulla eu ullamcorper quam, in tempus nulla. quisque accumsan euismod finibus.

结果

列表

- `~![iconoir-rocket|var(--color-purple)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫
- `~![iconoir-rocket|var(--color-yellow)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫
- `~![iconoir-rocket|var(--color-red)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫
- `~![iconoir-rocket|var(--color-blue)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫
- `~![iconoir-rocket|var(--color-green)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫
- `~![iconoir-rocket|var(--color-orange)]` 阿尔法 布拉沃 查理 德尔塔 伊科 福克斯特 高尔夫

结果

- [ ] `~![iconoir-calendar-minus|currentColor]` 任务列表 一个任务列表 一个任务列表
- [ ] `~![iconoir-calendar-plus|currentColor]` 任务列表 一个任务列表 一个任务列表
- [ ] `~![iconoir-check-circle|currentColor]` 任务列表 一个任务列表 一个任务列表
- [ ] `~![iconoir-clipboard-check|currentColor]` 任务列表 一个任务列表 一个任务列表
- [ ] `~![iconoir-redo-circle|currentColor]` 任务列表 一个任务列表 一个任务列表
- [ ] `~![iconoir-refresh-circular|currentColor]` 任务列表 一个任务列表 一个任务列表

结果

标题

~！[iconoir-code-brackets|currentColor] 一个带有 Iconoir 图标的标题

一个带有 Iconoir 图标的标题 ~![iconoir-code|currentColor]

一个带有 Iconoir 图标的标题 ~![iconoir-code-brackets|currentColor]

一个带有 Iconoir 图标的标题 ~![iconoir-code-brackets|orange]

~！[iconoir-code-brackets|red|1.5em|1.5em] 一个带有 Iconoir 图标的标题

一个带有 Iconoir 图标的标题 ~![iconoir-code|green|1.5em|1.5em]

结果

引用样式块

`~![iconoir-brain|currentColor|48px|48px]` **Lorem Ipsum Dolor Sit Amet** consectetur adipiscing elit. morbi bibendum commodo congue. vivamus efficitur aliquam felis, id viverra eros blandit sit amet. nam feugiat purus ac sem aliquam, sit amet dictum dui bibendum. sed tincidunt porttitor odio at feugiat. cras sed viverra libero. suspendisse potenti. nulla eu ullamcorper quam, in tempus nulla. quisque accumsan euismod finibus.

p:has(iconoir-icon[name=iconoir-brain]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  color: var(--text-muted);
  border-radius: 6px;
  border: 2px dashed var(--color-purple);
  padding: 9px 18px;
  background-color: rgba(var(--color-purple-rgb), 0.15);
  text-align: justify;
}
iconoir-icon[name=iconoir-brain] {
  color:var(--color-purple);
  display:flex;
  margin-right: 7px;
}
strong {
  color:var(--color-purple);
  font-size: 1.88em;  
  text-align: center;
  flex-grow: 1;
}

结果

表格

|                  图标                  | 名称         |
|:--------------------------------------:| ------------ |
| `~![iconoir-bread-slice\|saddlebrown]` | bread-slice  |
| `~![iconoir-peace-hand\|currentColor]` | peace-hand   |
|     `~![iconoir-pizza-slice\|red]`     | pizza-slice  |
| `~![iconoir-wifi\|var(--color-cyan)]`  | wifi         |

结果

支持额外的 CSS 类

• 当在 <th> 或 <td> 内使用图标时，会向元素添加 special-iconoir-th-callout 或 special-iconoir-td-callout 的 CSS 类。
• 当在 <li> 内使用图标时，会向元素添加 special-iconoir-list-callout 的 CSS 类。
• 此外，还会向相同的元素添加一个 data-icon 属性，其中包含图标名称，以增加特定性。

<td class="special-iconoir-th-callout" data-icon="iconoir-heart">
 <icon-component>
</td>

<li class="special-iconoir-list-callout" data-icon="iconoir-peace-hand">
 <icon-component>
</li>

插件安装

从 Obsidian 的设置或首选项中：

1. 社区插件 > 浏览
2. 搜索 “iconoir”

或者：

1. 下载最新的 发布存档
2. 解压下载的存档
3. 将 iconoir-icons 文件夹移动到 /path/to/vault/.obsidian/plugins/
4. 设置 > 社区插件 > 重新加载 已安装的插件
5. 启用插件

或者：

1. 下载 dist/main.js、manifest.json 和 styles.css
2. 创建一个新文件夹 /path/to/vault/.obsidian/plugins/iconoir-icons
3. 将所有 3 个文件移动到 /path/to/vault/.obsidian/plugins/iconoir-icons
4. 设置 > 社区插件 > 重新加载 已安装的插件
5. 启用插件

截图

发展

克隆这个仓库

cd /path/to/vault/.obsidian/plugins
git clone https://github.com/gapmiss/iconoir-icons.git
cd iconoir-icons

安装包并运行

npm i
npm run dev

启用插件

1. 打开 设置 → 社区插件
2. 启用 Iconoir Icons 插件。

注意事项

• 2023 年 2 月 9 日 目前没有已知的注意事项。
• 2023 年 5 月 27 日 目前没有已知的注意事项。