Spaces:
Sleeping
Sleeping
File size: 2,501 Bytes
c63ff03 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
Several of the UI components in the Obsidian API lets you configure an accompanying icon. You can choose from one of the built-in icons, or you can add your own.
## Browse available icons
Browse to [lucide.dev](https://lucide.dev/) to see all available icons and their corresponding names.
**Please note:** Only icons up to v0.171.0 are supported at this time.
## Use icons
If you'd like to use icons in your custom interfaces, use the [[setIcon|setIcon()]] utility function to add an icon to an [[HTML elements|HTML element]]. The following example adds icon to the status bar:
```ts
import { Plugin, setIcon } from "obsidian";
export default class ExamplePlugin extends Plugin {
async onload() {
const item = this.addStatusBarItem();
setIcon(item, "info");
}
}
```
To change the size of the icon, set the `--icon-size` [[Reference/CSS variables/Foundations/Icons|CSS variable]] on the element containing the icon using preset sizes:
```css
div {
--icon-size: var(--icon-size-m);
}
```
## Add your own icon
To add a custom icon for your plugin, use the [[addIcon|addIcon()]] utility:
```ts
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` takes two arguments:
1. A name to uniquely identify your icon.
2. The SVG content for the icon, without the surrounding `<svg>` tag.
Note that your icon needs to fit within a `0 0 100 100` view box to be drawn properly.
After the call to `addIcon`, you can use the icon just like any of the built-in icons.
### Icon design guidelines
For compatibility and cohesiveness with the Obsidian interface, your icons should [follow Lucide’s guidelines](https://lucide.dev/guide/design/icon-design-guide):
- Icons must be designed on a 24 by 24 pixels canvas
- Icons must have at least 1 pixel padding within the canvas
- Icons must have a stroke width of 2 pixels
- Icons must use round joins
- Icons must use round caps
- Icons must use centered strokes
- Shapes (such as rectangles) in icons must have border radius of 2 pixels
- Distinct elements must have 2 pixels of spacing between each other
Lucide also [provides templates and guides](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md) for vector editors such as Illustrator, Figma, and Inkscape.
|