mirror of
https://github.com/gapmiss/iconoir-icons.git
synced 2026-07-22 08:00:25 +00:00
Initial release v0.0.1
This commit is contained in:
gapmiss
parent
0b58426af9
commit
0946d1948c
31 changed files with 3514 additions and 1 deletions
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
tab_width = 2
|
||||
3
.eslintignore
Normal file
3
.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
node_modules/
|
||||
|
||||
main.js
|
||||
23
.eslintrc
Normal file
23
.eslintrc
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"env": { "node": true },
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"no-prototype-builtins": "off",
|
||||
"@typescript-eslint/no-empty-function": "off"
|
||||
}
|
||||
}
|
||||
224
README.md
224
README.md
|
|
@ -1,2 +1,224 @@
|
|||
# iconoir-icons
|
||||
Bespoken Iconoir icons for Obsidian
|
||||
|
||||
A plugin for creating & displaying customized SVG [Iconoir Icons](https://iconoir.com/) in [Obsidian](https://obsidian.md).
|
||||
|
||||
## notice
|
||||
|
||||
> ⚠️ NOTICE
|
||||
>
|
||||
> This is the 1st released version (beta) of this plugin. The plugin does not delete or remove any data in a note, but does change the display in the `reading` view. It has NOT been tested w/ `Live Preview` and it is presumed that there are display issues when using `Live Preview`. Other caveats are listed below.
|
||||
|
||||
> Iconoir
|
||||
> Copyright (c) 2023 Luca Burgio - https://iconoir.com
|
||||
> License - https://github.com/lucaburgio/iconoir/blob/main/LICENSE (Code: MIT License)
|
||||
|
||||
## features
|
||||
|
||||
### icon search suggestions
|
||||
|
||||
|
||||
|
||||
### custom `CSS` styles
|
||||
|
||||
|
||||
|
||||
## syntax
|
||||
|
||||
To trigger the icon name suggestion interface, type the ampersand key twice(`&&`) and start typing a query.
|
||||
|
||||
The syntax for the icon component is:
|
||||
|
||||
```markdown
|
||||
`~![ICON|COLOR|W|H|STYLE]`
|
||||
|
||||
The delimiter is the pipe symbol `|`.
|
||||
|
||||
`ICON` = the name of the icon e.g. `iconoir-peace-hand`
|
||||
`COLOR`= the CSS color of the icon e.g. `purple`
|
||||
`W`= the CSS width of the icon e.g. `1em`
|
||||
`H`= the CSS height of the icon e.g. `1em`
|
||||
`STYLE` = the CSS rule(s) for the icon component e.g. `float:right;`
|
||||
|
||||
ONLY the `ICON` name is required. ALL others optional.
|
||||
|
||||
`~![iconoir-peace-hand|purple|1em|1em|float:right;]`
|
||||
```
|
||||
|
||||
## examples
|
||||
|
||||
See the `examples` directory for additional sample code.
|
||||
|
||||
### basic block
|
||||
|
||||
```markdown
|
||||
Alpha Bravo `~![iconoir-antenna|green|22px|22px]` Charlie Delta `~![iconoir-wristwatch|red|22px|22px]` Echo Foxtrot Golf `~![iconoir-golf|green|22px|22px]` Hotel India Juliet Kilo `~![iconoir-airplane|red|22px|22px]` Lima Mike November `~![iconoir-calendar|magenta|22px|22px]` Oscar Papa Quebec Romeo Sierra `~![iconoir-compass|var(--color-orange)|22px|22px]` Tango Uniform Victor `~![iconoir-dashboard-dots|red|22px|22px]` Whiskey Xray Yankee Zulu
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
|
||||
|
||||
```markdown
|
||||
`~![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.
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
![[assets/block.png]]
|
||||
|
||||
|
||||
### lists
|
||||
|
||||
```markdown
|
||||
- `~![iconoir-rocket|var(--color-purple)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-yellow)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-red)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-blue)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-green)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-orange)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
|
||||
|
||||
```markdown
|
||||
- [ ] `~![iconoir-calendar-minus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-calendar-plus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-check-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-clipboard-check|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-redo-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-refresh-circular|currentColor]` task list a task list a task list
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
|
||||
|
||||
|
||||
### headings
|
||||
|
||||
```markdown
|
||||
# `~![iconoir-code-brackets|currentColor]` A Heading w/ an Iconoir Icon
|
||||
## A Heading w/ an Iconoir Icon `~![iconoir-code|currentColor]`
|
||||
### A Heading `~![iconoir-code-brackets|currentColor]` w/ an Iconoir Icon
|
||||
#### A Heading w/ an Iconoir Icon `~![iconoir-code-brackets|orange]`
|
||||
##### `~![iconoir-code-brackets|red|1.5em|1.5em]` A Heading w/ an Iconoir Icon
|
||||
###### A Heading w/ an Iconoir Icon `~![iconoir-code|green|1.5em|1.5em]`
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
|
||||
|
||||
### callout styled block
|
||||
|
||||
```markdown
|
||||
`~![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.
|
||||
```
|
||||
|
||||
```css
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
#### results
|
||||
|
||||
|
||||
|
||||
### tables
|
||||
|
||||
> **NOTE:** When using icons in a table, the PIPE `|` symbol must be escaped w/ a BACKSLASH `\`
|
||||
> e.g. `\|`
|
||||
|
||||
```markdown
|
||||
| icon | name |
|
||||
|:--------------------------------------:| ----------- |
|
||||
| `~![iconoir-bread-slice\|saddlebrown]` | bread-slice |
|
||||
| `~![iconoir-peace-hand\|currentColor]` | peace-hand |
|
||||
| `~![iconoir-pizza-slice\|red]` | pizza-slice |
|
||||
| `~![iconoir-wifi\|var(--color-cyan)]` | wifi |
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
|
||||
|
||||
|
||||
### additional `CSS` class support
|
||||
|
||||
- When using icons inside a `<th>` or `<td>`, the CSS class `special-iconoir-th-callout` or `special-iconoir-td-callout` is added to the element.
|
||||
- When using icons inside a `<li>`, the CSS class `special-iconoir-list-callout` is added to the element.
|
||||
- In addition, a `data-icon` attribute, w/ the icon name, is added to the same element for added specificity.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
## plugin installation
|
||||
|
||||
1. download the latest [release archive](https://github.com/gapmiss/iconoir-icons/releases)
|
||||
2. uncompress the downloaded archive
|
||||
3. move the enclosed `iconoir-icons` folder to `/path/to/vault/.obsidian/plugins/`
|
||||
4. Settings > Community plugins > reload **Installed plugins**
|
||||
5. enable plugin
|
||||
|
||||
or:
|
||||
|
||||
1. download `main.js`, `manifest.json` & `styles.css`
|
||||
2. create a new folder `/path/to/vault/.obsidian/plugins/iconoir-icons`
|
||||
3. move all 3 files to `/path/to/vault/.obsidian/plugins/iconoir-icons`
|
||||
4. Settings > Community plugins > reload **Installed plugins**
|
||||
5. enable plugin
|
||||
|
||||
## development
|
||||
|
||||
### clone this repo
|
||||
|
||||
```bash
|
||||
cd /path/to/vault/.obsidian/plugins
|
||||
git clone https://github.com/gapmiss/iconoir-icons.git
|
||||
cd iconoir-icons
|
||||
```
|
||||
|
||||
### install packages and run
|
||||
|
||||
```bash
|
||||
npm i
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### enable plugin
|
||||
|
||||
1. open `Settings` → `Community plugins`
|
||||
2. enable the `Iconoir Icons` plugin.
|
||||
|
||||
## caveats
|
||||
|
||||
- 2023-02-09 None known at this time.
|
||||
BIN
assets/basic.png
Normal file
BIN
assets/basic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/block.png
Normal file
BIN
assets/block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
assets/callout.png
Normal file
BIN
assets/callout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
assets/headings.png
Normal file
BIN
assets/headings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
assets/iconoir-suggester-1.gif
Normal file
BIN
assets/iconoir-suggester-1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
assets/iconoir-suggester-2.gif
Normal file
BIN
assets/iconoir-suggester-2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
BIN
assets/list.png
Normal file
BIN
assets/list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
assets/tables.png
Normal file
BIN
assets/tables.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/tasks.png
Normal file
BIN
assets/tasks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
1
data.json
Normal file
1
data.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
42
esbuild.config.mjs
Normal file
42
esbuild.config.mjs
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import esbuild from "esbuild";
|
||||
import process from "process";
|
||||
import builtins from 'builtin-modules'
|
||||
|
||||
const banner =
|
||||
`/*
|
||||
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
|
||||
if you want to view the source, please visit the github repository of this plugin
|
||||
*/
|
||||
`;
|
||||
|
||||
const prod = (process.argv[2] === 'production');
|
||||
|
||||
esbuild.build({
|
||||
banner: {
|
||||
js: banner,
|
||||
},
|
||||
entryPoints: ['main.ts'],
|
||||
bundle: true,
|
||||
external: [
|
||||
'obsidian',
|
||||
'electron',
|
||||
'@codemirror/autocomplete',
|
||||
'@codemirror/collab',
|
||||
'@codemirror/commands',
|
||||
'@codemirror/language',
|
||||
'@codemirror/lint',
|
||||
'@codemirror/search',
|
||||
'@codemirror/state',
|
||||
'@codemirror/view',
|
||||
'@lezer/common',
|
||||
'@lezer/highlight',
|
||||
'@lezer/lr',
|
||||
...builtins],
|
||||
format: 'cjs',
|
||||
watch: !prod,
|
||||
target: 'es2018',
|
||||
logLevel: "info",
|
||||
sourcemap: prod ? false : 'inline',
|
||||
treeShaking: true,
|
||||
outfile: 'main.js',
|
||||
}).catch(() => process.exit(1));
|
||||
51
examples/basic-blocks.md
Normal file
51
examples/basic-blocks.md
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
## basic block example
|
||||
|
||||
### markdown
|
||||
|
||||
|
||||
```markdown
|
||||
Alpha Bravo `~![iconoir-antenna|green|22px|22px]` Charlie Delta `~![iconoir-wristwatch|red|22px|22px]` Echo Foxtrot Golf `~![iconoir-golf|green|22px|22px]` Hotel India Juliet Kilo `~![iconoir-airplane|red|22px|22px]` Lima Mike November `~![iconoir-calendar|magenta|22px|22px]` Oscar Papa Quebec Romeo Sierra `~![iconoir-compass|var(--color-orange)|22px|22px]` Tango Uniform Victor `~![iconoir-dashboard-dots|red|22px|22px]` Whiskey Xray Yankee Zulu
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
Alpha Bravo `~![iconoir-antenna|green|22px|22px]` Charlie Delta `~![iconoir-wristwatch|red|22px|22px]` Echo Foxtrot Golf `~![iconoir-golf|green|22px|22px]` Hotel India Juliet Kilo `~![iconoir-airplane|red|22px|22px]` Lima Mike November `~![iconoir-calendar|magenta|22px|22px]` Oscar Papa Quebec Romeo Sierra `~![iconoir-compass|var(--color-orange)|22px|22px]` Tango Uniform Victor `~![iconoir-dashboard-dots|red|22px|22px]` Whiskey Xray Yankee Zulu
|
||||
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
`~![iconoir-infinite|purple|48px|48px|float:right;opacity:.5;]` 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.
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
`~![iconoir-infinite|purple|48px|48px|float:right;opacity:.5;]` 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.
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
`~![iconoir-flower|pink|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.
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
`~![iconoir-flower|pink|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.
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
`~![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.
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
`~![iconoir-leaf|green|48px|48px|float:right;background-color:#ccc;]` 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.
|
||||
|
||||
---
|
||||
63
examples/basic-lists.md
Normal file
63
examples/basic-lists.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
### markdown
|
||||
|
||||
```markdown
|
||||
- `~![iconoir-rocket|var(--color-purple)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-yellow)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-red)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-blue)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-green)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-orange)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
- `~![iconoir-rocket|var(--color-purple)]` Alpha Bravo Charlie **Delta** Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-yellow)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-red)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-blue)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-green)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-orange)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
- [ ] `~![iconoir-calendar-minus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-calendar-plus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-check-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-clipboard-check|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-redo-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-refresh-circular|currentColor]` task list a task list a task list
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
- [ ] `~![iconoir-calendar-minus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-calendar-plus|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-check-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-clipboard-check|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-redo-circle|currentColor]` task list a task list a task list
|
||||
- [ ] `~![iconoir-refresh-circular|currentColor]` task list a task list a task list
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
- [ ] `~![iconoir-calendar|currentColor]` task list a task list a task list
|
||||
- `~![iconoir-check-circle|currentColor]` not a task list a task list a task list
|
||||
- [x] `~![iconoir-clipboard-check|currentColor]` task list a task list a task list
|
||||
- `~![iconoir-redo-circle|currentColor]` not a task list a task list a task list
|
||||
- [ ] `~![iconoir-refresh-circular|currentColor]` task list a task list a task list
|
||||
- [x] `~![iconoir-hourglass|currentColor]` task list a task list a task list
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
- [ ] `~![iconoir-calendar|currentColor]` task list a task list a task list
|
||||
- `~![iconoir-check-circle|currentColor]` not a task list a task list a task list
|
||||
- [x] `~![iconoir-clipboard-check|currentColor]` task list a task list a task list
|
||||
- `~![iconoir-redo-circle|currentColor]` not a task list a task list a task list
|
||||
- [ ] `~![iconoir-refresh-circular|currentColor]` task list a task list a task list
|
||||
- [x] `~![iconoir-hourglass|currentColor]` task list a task list a task list
|
||||
71
examples/callouts.md
Normal file
71
examples/callouts.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
## basic callout example
|
||||
|
||||
### css snippet
|
||||
|
||||
```css
|
||||
/* Notice: this rule applies to ALL BLOCKS that have the target ICON name */
|
||||
p:not(:has(span.internal-embed.markdown-embed.inline-embed.is-loaded)):has(iconoir-icon[name=iconoir-warning-triangle]) {
|
||||
color: var(--text-muted);
|
||||
border-radius: 6px;
|
||||
border-style: double;
|
||||
border-width: 3px;
|
||||
border-color: rgba(var(--color-red-rgb), 0.95);
|
||||
padding: 5px 11px;
|
||||
background-color: rgba(var(--color-red-rgb), 0.08);
|
||||
text-align: justify;
|
||||
}
|
||||
p:not(span.internal-embed.markdown-embed.inline-embed.is-loaded) iconoir-icon[name=iconoir-warning-triangle] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
```
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
`~![iconoir-megaphone|rgba(var(--color-red-rgb),.75)|32px|32px]` 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.
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
`~![iconoir-warning-triangle|rgba(var(--color-red-rgb),.75)|32px|32px]` 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.
|
||||
|
||||
---
|
||||
|
||||
## complex callout example
|
||||
|
||||
### css snippet
|
||||
|
||||
```css
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
`~![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.
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
`~![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.
|
||||
45
examples/headings.md
Normal file
45
examples/headings.md
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
`~![iconoir-brain|currentColor]` 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.
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
# `~![iconoir-code-brackets|currentColor]` A Heading w/ an Iconoir Icon
|
||||
## A Heading w/ an Iconoir Icon `~![iconoir-code|currentColor]`
|
||||
### A Heading `~![iconoir-code-brackets|currentColor]` w/ an Iconoir Icon
|
||||
#### A Heading w/ an Iconoir Icon `~![iconoir-code-brackets|orange]`
|
||||
##### `~![iconoir-code-brackets|red|1.5em|1.5em]` A Heading w/ an Iconoir Icon
|
||||
###### A Heading w/ an Iconoir Icon `~![iconoir-code|green|1.5em|1.5em]`
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
# `~![iconoir-code-brackets|currentColor]` A Heading w/ an Iconoir Icon
|
||||
## A Heading w/ an Iconoir Icon `~![iconoir-code|currentColor]`
|
||||
### A Heading `~![iconoir-code-brackets|currentColor]` w/ an Iconoir Icon
|
||||
#### A Heading w/ an Iconoir Icon `~![iconoir-code-brackets|orange]`
|
||||
##### `~![iconoir-code-brackets|red|1.5em|1.5em]` A Heading w/ an Iconoir Icon
|
||||
###### A Heading w/ an Iconoir Icon `~![iconoir-code|green|1.5em|1.5em]`
|
||||
|
||||
---
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
# lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),1)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
## lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.9)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.8)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
#### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.7)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
##### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.6)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
###### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.5)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
# lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),1)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
## lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.9)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.8)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
#### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.7)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
##### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.6)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
###### lorem ipsum dolor sit `~![iconoir-shop-alt|rgba(var(--color-purple-rgb),.5)|1.33em|1.33em|position:relative;top:7px;]`
|
||||
72
examples/iconoir-icons-examples.css
Normal file
72
examples/iconoir-icons-examples.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/*******
|
||||
*
|
||||
* Lists
|
||||
*
|
||||
*******/
|
||||
|
||||
|
||||
|
||||
/* any <UL>,<OL> w/ a .special-iconoir-list-callout class assinged to a <LI> */
|
||||
ol.has-list-bullet:has(li.special-iconoir-list-callout),
|
||||
ul.has-list-bullet:has(li.special-iconoir-list-callout) {
|
||||
border: 1px solid var(--interactive-accent);
|
||||
border-radius: 6px;
|
||||
padding-block:10px;
|
||||
}
|
||||
|
||||
/*******
|
||||
*
|
||||
* Callouts
|
||||
*
|
||||
*******/
|
||||
/* p:not(:has(span.internal-embed.markdown-embed.inline-embed.is-loaded)):has(iconoir-icon[name=iconoir-warning-triangle]) { */
|
||||
p:not(:has([class*=embed])):has(iconoir-icon[name=iconoir-warning-triangle]) {
|
||||
color: var(--text-muted);
|
||||
border-radius: 6px;
|
||||
border-style: double;
|
||||
border-width: 3px;
|
||||
border-color: rgba(var(--color-red-rgb), 0.95);
|
||||
padding: 5px 11px;
|
||||
background-color: rgba(var(--color-red-rgb), 0.08);
|
||||
text-align: justify;
|
||||
}
|
||||
p:not(span.internal-embed.markdown-embed.inline-embed.is-loaded) iconoir-icon[name=iconoir-warning-triangle] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
/* ========================== */
|
||||
p:not(:has([class*=embed])):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;
|
||||
}
|
||||
p:not(:has(span.internal-embed.markdown-embed.inline-embed.is-loaded)) iconoir-icon[name=iconoir-brain] {
|
||||
color:var(--color-purple);
|
||||
display:flex;
|
||||
margin-right: 7px;
|
||||
}
|
||||
p:not(:has(span.internal-embed.markdown-embed.inline-embed.is-loaded)):has(iconoir-icon[name=iconoir-brain]) strong {
|
||||
color:var(--color-purple);
|
||||
font-size: 1.88em;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
/*******
|
||||
*
|
||||
* Tablies
|
||||
*
|
||||
*******/
|
||||
/* or "th[data-name=iconoir-heart]" for more specificity */
|
||||
th.special-iconoir-th-callout {
|
||||
text-align: center;
|
||||
}
|
||||
/* w/ "th[data-name=iconoir-gift]" for more specificity */
|
||||
td[data-name=iconoir-gift].special-iconoir-td-callout {
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
text-align: center;
|
||||
}
|
||||
40
examples/iconoir-icons-lists.css
Normal file
40
examples/iconoir-icons-lists.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/*******
|
||||
*
|
||||
* Lists
|
||||
*
|
||||
*******/
|
||||
/* any <UL>,<OL> w/ a .special-iconoir-list-callout class assinged to a <LI> */
|
||||
ol.has-list-bullet:has(li.special-iconoir-list-callout),
|
||||
ul.has-list-bullet:has(li.special-iconoir-list-callout) {
|
||||
border: 1px solid var(--interactive-accent);
|
||||
border-radius: 6px;
|
||||
padding-block:10px;
|
||||
}
|
||||
li.special-iconoir-list-callout {
|
||||
box-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09),
|
||||
0 2px 4px 0 rgba(var(--color-purple-rgb), 0.3),
|
||||
0 1px 1.5px 0 rgba(var(--color-purple-rgb), 0.3),
|
||||
0 1px 2px 0 rgba(var(--color-purple-rgb), 0.3),
|
||||
0 0 0 0 transparent;
|
||||
/* padding-left:1.77em; */
|
||||
margin: 13px 0 !important;
|
||||
background-color:rgba(var(--color-purple-rgb), 0.10);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-bullet {
|
||||
/* display: none; */
|
||||
}
|
||||
/*******
|
||||
*
|
||||
* Tasks
|
||||
*
|
||||
*******/
|
||||
li.task-list-item {
|
||||
/* border: 2px dashed var(--color-base-50) !important; */
|
||||
}
|
||||
li.task-list-item > span.tasks-list-text:has(iconoir-icon) {
|
||||
color:var(--text-normal);
|
||||
border: 2px dashed var(--color-base-50) !important;
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
21
examples/list-callouts.md
Normal file
21
examples/list-callouts.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
- `~![iconoir-rocket|var(--color-cyan)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-red)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-blue)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-green)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-orange)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- `~![iconoir-rocket|var(--color-yellow)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
|
||||
---
|
||||
|
||||
- [ ] `~![iconoir-rocket|var(--color-red)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- [ ] `~![iconoir-rocket|var(--color-blue)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- [ ] `~![iconoir-rocket|var(--color-green)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
- [ ] #task `~![iconoir-rocket|var(--color-orange)]` Alpha Bravo Charlie `~![iconoir-box|currentColor]` Delta Echo Foxtrot Golf #todo 2023-02-09
|
||||
- [ ] `~![iconoir-rocket|var(--color-yellow)]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
|
||||
---
|
||||
|
||||
1. [ ] `~![iconoir-home]` Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
2. [ ] Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
3. [ ] Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
4. [ ] Alpha Bravo Charlie Delta Echo Foxtrot Golf
|
||||
61
examples/tables.md
Normal file
61
examples/tables.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
> [!HELP] Escaping pipe delimiter
|
||||
> When using icons in a table, the PIPE `|` symbol must be escaped w/ a BACKSLASH `\`
|
||||
> e.g. `\|`
|
||||
> see examples below
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
| icon | name |
|
||||
|:--------------------------------------:| ----------- |
|
||||
| `~![iconoir-bread-slice\|saddlebrown]` | bread-slice |
|
||||
| `~![iconoir-peace-hand\|currentColor]` | peace-hand |
|
||||
| `~![iconoir-pizza-slice\|red]` | pizza-slice |
|
||||
| `~![iconoir-wifi\|var(--color-cyan)]` | wifi |
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
| icon | name |
|
||||
|:--------------------------------------:| ----------- |
|
||||
| `~![iconoir-bread-slice\|saddlebrown]` | bread-slice |
|
||||
| `~![iconoir-peace-hand\|currentColor]` | peace-hand |
|
||||
| `~![iconoir-pizza-slice\|red]` | pizza-slice |
|
||||
| `~![iconoir-wifi\|var(--color-cyan)]` | wifi |
|
||||
|
||||
---
|
||||
|
||||
> [!INFO] CSS Class support
|
||||
> When using icons inside a `<th>` or `<td>`, the CSS class `special-iconoir-th-callout` or `special-iconoir-td-callout` is added to the element.
|
||||
> When using icons inside a `<li>`, the CSS class `special-iconoir-list-callout` is added to the element.
|
||||
> In addition, a `data-icon` attribute, w/ the icon name, is added to the same element for added specificity.
|
||||
|
||||
### markdown
|
||||
|
||||
```markdown
|
||||
| `~![iconoir-heart\|red]` | supports `<th>` |
|
||||
| ------------------------ | -------------------------------- |
|
||||
| and also `<td>` | `~![iconoir-gift\|currentColor]` |
|
||||
|
||||
```
|
||||
|
||||
### css snippet
|
||||
|
||||
```css
|
||||
/* or "th[data-icon=iconoir-heart]" for more specificity */
|
||||
th.special-iconoir-th-callout {
|
||||
text-align: center;
|
||||
}
|
||||
/* w/ "th[data-icon=iconoir-gift]" for more specificity */
|
||||
td[data-icon=iconoir-gift].special-iconoir-td-callout {
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
### results
|
||||
|
||||
| `~![iconoir-heart\|red]` | supports `<th>` |
|
||||
| ------------------------ | -------------------------------- |
|
||||
| and also `<td>` | `~![iconoir-gift\|currentColor]` |
|
||||
1261
iconoirNames.ts
Normal file
1261
iconoirNames.ts
Normal file
File diff suppressed because it is too large
Load diff
182
main.ts
Normal file
182
main.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import { Plugin, TFile,
|
||||
Editor, EditorPosition,
|
||||
EditorSuggestTriggerInfo,
|
||||
EditorSuggest, EditorSuggestContext,
|
||||
MarkdownPostProcessor } from 'obsidian';
|
||||
import {html, LitElement} from 'lit';
|
||||
import { iconoir } from './iconoirNames';
|
||||
|
||||
enum ComponentChoice {
|
||||
Default = "Default",
|
||||
}
|
||||
|
||||
export default class IconoirPlugin extends Plugin {
|
||||
iconoirNames: string[];
|
||||
isListItem: any;
|
||||
|
||||
async litBlockHandler(type: ComponentChoice, source: string, el: HTMLElement, ctx: any): Promise<any> {
|
||||
const element:any = document.createRange().createContextualFragment(source);
|
||||
let input = element
|
||||
const blk = el.createEl("div", {cls: "lit-block"});
|
||||
let inputElement: HTMLElement;
|
||||
inputElement = blk.createEl("div", {text: input, cls: "lit-innerblock"});
|
||||
}
|
||||
|
||||
async onload() {
|
||||
this.registerEditorSuggest(new IconoirSuggester(this));
|
||||
this.registerMarkdownCodeBlockProcessor("iconoir", this.litBlockHandler.bind(this, null));
|
||||
this.registerMarkdownPostProcessor(buildPostProcessor());
|
||||
this.iconoirNames = Object.keys(iconoir);
|
||||
this.isListItem = false;
|
||||
console.log('iconoir-icons loaded');
|
||||
}
|
||||
onunload() {
|
||||
console.log('iconoir-icons unloaded');
|
||||
}
|
||||
}
|
||||
|
||||
export function buildPostProcessor(): MarkdownPostProcessor {
|
||||
return (el) => {
|
||||
el.findAll("code").forEach((code) => {
|
||||
let text = code.innerText.trim();
|
||||
console.log(text);
|
||||
if (text.startsWith('~![')) {
|
||||
let frag = text.substring(2).trim();
|
||||
if (frag.endsWith(']')) {
|
||||
let content = frag.substring(frag.length-1,1).trim();
|
||||
const arr = (code.parentElement?.tagName === 'TD' || code.parentElement?.tagName === 'TH')
|
||||
? content.split('\\|')
|
||||
: content.split('|');
|
||||
if (arr[0] === '' || arr[0] === undefined) {
|
||||
return '';
|
||||
}
|
||||
if (code.parentElement?.tagName === 'LI') {
|
||||
code.parentElement?.addClass('special-iconoir-list-callout');
|
||||
code.parentElement?.setAttr("data-icon", arr[0]);
|
||||
}
|
||||
if (code.parentElement?.tagName === 'TH') {
|
||||
code.parentElement?.addClass('special-iconoir-th-callout');
|
||||
code.parentElement?.setAttr("data-icon", arr[0]);
|
||||
}
|
||||
if (code.parentElement?.tagName === 'TD') {
|
||||
code.parentElement?.addClass('special-iconoir-td-callout');
|
||||
code.parentElement?.setAttr("data-icon", arr[0]);
|
||||
}
|
||||
var newEl = document.createElement("iconoir-icon");
|
||||
newEl.setAttribute('name',arr[0]);
|
||||
newEl.setAttribute('aria-label',arr[0]+' icon');
|
||||
newEl.setAttribute('aria-label-position', 'top');
|
||||
if (arr[1] !== undefined) {
|
||||
newEl.setAttribute('stroke',arr[1]);
|
||||
}
|
||||
if (arr[2] !== undefined) {
|
||||
newEl.setAttribute('width',arr[2]);
|
||||
}
|
||||
if (arr[3] !== undefined) {
|
||||
newEl.setAttribute('height',arr[3]);
|
||||
}
|
||||
if (arr[4] !== undefined) {
|
||||
newEl.setAttribute('style',arr[4]);
|
||||
}
|
||||
code.parentNode?.replaceChild(newEl, code);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class IconoirSuggester extends EditorSuggest<string> {
|
||||
plugin: IconoirPlugin;
|
||||
|
||||
constructor(plugin: IconoirPlugin) {
|
||||
super(plugin.app);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
|
||||
onTrigger(cursor: EditorPosition, editor: Editor, _: TFile): EditorSuggestTriggerInfo | null {
|
||||
let foo='bar';
|
||||
if (foo==='bar') {
|
||||
const sub = editor.getLine(cursor.line).substring(0, cursor.ch);
|
||||
const match = sub.match(/&&\S+$/)?.first();
|
||||
if (match) {
|
||||
return {
|
||||
end: cursor,
|
||||
start: {
|
||||
ch: sub.lastIndexOf(match),
|
||||
line: cursor.line,
|
||||
},
|
||||
query: match,
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getSuggestions(context: EditorSuggestContext): string[] {
|
||||
let iconoir_query = context.query.replace('&&', '').toLowerCase();
|
||||
return this.plugin.iconoirNames.filter(p => p.includes(iconoir_query));
|
||||
}
|
||||
|
||||
renderSuggestion(suggestion: string, el: HTMLElement): void {
|
||||
const outer = el.createDiv({ cls: "icon-suggester-container" });
|
||||
outer.createDiv({ cls: "iconoir-icon-name" }).setText(suggestion);
|
||||
}
|
||||
|
||||
selectSuggestion(suggestion: string): void {
|
||||
if(this.context) {
|
||||
// (this.context.editor as Editor).replaceRange('`~!['+iconoir[suggestion]+'|currentColor]`', this.context.start, this.context.end);
|
||||
(this.context.editor as Editor).replaceRange('`~!['+iconoir[suggestion]+']`', this.context.start, this.context.end);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IconoirIcon extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
name: { type: String },
|
||||
stroke: { type: String },
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
css: { type: String }
|
||||
}
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
this.name = 'iconoir-1st-medal';
|
||||
this.stroke = 'currentColor';
|
||||
this.width = '1.2em';
|
||||
this.height = '1.2em';
|
||||
this.css = '';
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<i class="${this.name}" style="${this.css}"></i>
|
||||
<style>
|
||||
i[class^="iconoir-"]::before,
|
||||
i[class*=" iconoir-"]::before {
|
||||
content: " ";
|
||||
display: var(--special-display);
|
||||
-webkit-mask-image:var(--${this.name});
|
||||
mask-image:var(--${this.name});
|
||||
background: ${this.stroke};
|
||||
mask-size: cover;
|
||||
-webkit-mask-size: cover;
|
||||
width: ${this.width};
|
||||
height: ${this.height};
|
||||
}
|
||||
i[class^="iconoir-"],
|
||||
i[class*=" iconoir-"] {
|
||||
display:inline-flex !important;
|
||||
border: var(--special-border);
|
||||
margin: var(--special-margin);
|
||||
padding: var(--special-padding);
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
var isRegistered = window.customElements.get('iconoir-icon');
|
||||
if (isRegistered === undefined) {
|
||||
window.customElements.define('iconoir-icon', IconoirIcon);
|
||||
}
|
||||
11
manifest.json
Normal file
11
manifest.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"id": "iconoir-icons",
|
||||
"name": "Iconoir Icons",
|
||||
"version": "0.0.1",
|
||||
"minAppVersion": "0.15.0",
|
||||
"description": "A plugin for creating & displaying customized SVG Iconoir Icons in Obsidian.",
|
||||
"author": "@gapmiss",
|
||||
"authorUrl": "https://gihub.com/gapmiss",
|
||||
"fundingUrl": "https://obsmd.io",
|
||||
"isDesktopOnly": false
|
||||
}
|
||||
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "iconoir-icons",
|
||||
"version": "0.0.1",
|
||||
"description": "Bespoken Iconoir icons for Obsidian",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"dev": "node esbuild.config.mjs",
|
||||
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
|
||||
"version": "node version-bump.mjs && git add manifest.json versions.json"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "https://github.com/gapmiss",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.11.6",
|
||||
"@typescript-eslint/eslint-plugin": "5.29.0",
|
||||
"@typescript-eslint/parser": "5.29.0",
|
||||
"builtin-modules": "3.3.0",
|
||||
"esbuild": "0.14.47",
|
||||
"obsidian": "latest",
|
||||
"tslib": "2.4.0",
|
||||
"typescript": "4.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^2.6.1"
|
||||
}
|
||||
}
|
||||
1266
styles.css
Normal file
1266
styles.css
Normal file
File diff suppressed because it is too large
Load diff
24
tsconfig.json
Normal file
24
tsconfig.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"inlineSourceMap": true,
|
||||
"inlineSources": true,
|
||||
"module": "ESNext",
|
||||
"target": "ES6",
|
||||
"allowJs": true,
|
||||
"noImplicitAny": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"isolatedModules": true,
|
||||
"strictNullChecks": true,
|
||||
"lib": [
|
||||
"DOM",
|
||||
"ES5",
|
||||
"ES6",
|
||||
"ES7"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts"
|
||||
]
|
||||
}
|
||||
14
version-bump.mjs
Normal file
14
version-bump.mjs
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { readFileSync, writeFileSync } from "fs";
|
||||
|
||||
const targetVersion = process.env.npm_package_version;
|
||||
|
||||
// read minAppVersion from manifest.json and bump version to target version
|
||||
let manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
|
||||
const { minAppVersion } = manifest;
|
||||
manifest.version = targetVersion;
|
||||
writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t"));
|
||||
|
||||
// update versions.json with target version and minAppVersion from manifest.json
|
||||
let versions = JSON.parse(readFileSync("versions.json", "utf8"));
|
||||
versions[targetVersion] = minAppVersion;
|
||||
writeFileSync("versions.json", JSON.stringify(versions, null, "\t"));
|
||||
3
versions.json
Normal file
3
versions.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"0.0.1": "0.15.0"
|
||||
}
|
||||
Loading…
Reference in a new issue