Giter Club home page Giter Club logo

obsidian-icons-plugin's Introduction

Obsidian Icons Plugin

Obsidian Icons Plugin

Note:: Please report any bugs you encounter by opening a new issue on GitHub.

Add icons to your Obsidian notes. Supported icon sets:

You can toggle which icon set(s) you want to display in the icon picker from within the Icons Plugin settings.

This plugin uses react-icons to render icons via a Markdown postprocessor. Inspired by obsidian-citation-plugin and based on obsidian-sample-plugin.

Demo and Screenshots

Demonstration

A demonstration video showing the icon picker and the rendered markdown.

Screenshot Picker

Select any icon from the icon picker (selectively activate icon packs in the settings).

Screenshot Rendered

The rendered markdown will display the icons accordingly.

How to report bugs

As this is an experimental plugin, bugs are expected to occur. Kindly open an issue in this repository and describe in detail what bug you encountered.

Icon Sets and Licenses

Icon Set License Version Count
Font Awesome CC BY 4.0 License 5.12.1 1560
Remix Icon Apache License Version 2.0 2.5.0 2172

Customizing Icons

In order to customize the icons in order to change their color, size, etc, you should make a CSS snippet.

To do this, follow these steps:

  1. Go to Settings -> Appearance -> CSS Snippets
  2. Turn on the CSS Snippets option and then click the folder to navigate to it's folder.
  3. Make a new file called icons.css
  4. Open icons.css in your preferred text editor
  5. Add the following:
    .obsidian-icon {
    	... changes go here.
    }
    
  6. Go Back to Settings -> Appearance -> CSS Snippets
  7. Click the reload button
  8. A button with the title "icons" should appear, turn it on.

Your changes will now be applied and you can edit the file when you want.

Development

How to develop

  • Clone this repo to ./your-obsidian-vault/.obsidian/plugins/
  • yarn to install dependencies
  • npm run dev to start compilation in watch mode.

Releasing new releases

  • Update your manifest.json with your new version number, such as 1.0.1, and the minimum Obsidian version required for your latest release.
  • Update your versions.json file with "new-plugin-version": "minimum-obsidian-version" so older versions of Obsidian can download an older version of your plugin that's compatible.
  • Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix v. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
  • Upload the files manifest.json, main.js, styles.css as binary attachments.
  • Publish the release.
  • Use make release for convenience

Manually installing the plugin

  • Copy over main.js, styles.css, manifest.json to your vault VaultFolder/.obsidian/plugins/obsidian-icons-plugin/.

API Documentation

See https://github.com/obsidianmd/obsidian-api

obsidian-icons-plugin's People

Contributors

visini avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

obsidian-icons-plugin's Issues

Hotkey conflicts

A lot of time I use Ctrl + Shift + I to bring up developer mode. But when Icon plugin is enabled, it overides it and there's no way to adjust hotkeys. Any suggestions?

Allow alias for icons

Hi, first of all I think this is a nice plugin :).

I am using Obsidian to do all sorts of product-related tasks, one of which is user interviewing. I am thinking of using this plugin to quickly capture the context (emotions such as happy, sad) and their life (goals, obstacles, problems, workarounds) during user interviews.

For each of these I associate an icon, like this:

image

However, when I take notes during interview I probably will think of the term "background", instead of arrow up (which I associate with "background"). So I'd like a way that I can find/insert icons with their aliases. I believe this would simplify the learning curve so that I can adopt this plugin in my practice more easily.

Although most likely I'll just create mental shortcuts to deal with this, and in time I will no longer have a need for this particular feature, I think it's a value worth adding.

Thank you for your time and effort !

Question: Fonts included or loaded from the Internet?

Hi there, just a quick question, without having to check the code:

Does your plugin include the fonts or do they need to be loaded from the net?

Maybe a rare use case nowadays, but I often work on a laptop in areas without Internet, so my Obsidian must function fully without requiring internet access.

Feature Request: Mobile device support

Hi and thank you for such a great plugin. I noticed that the plugin is not supported on Android devices, is it planned to support mobile devices in the future? Thanks.

Update Documentation for customizing the Icons

This is completely unnecessary but I think it would be useful to people like me just getting into Obsidian, to have a section on customizing the Icons. It took me about 15 minutes reading through all the Obsidian documentation to figure out the most optimal way to apply custom CSS for specific rules and for someone with no experience with Electron/CSS it might be harder. I wrote an example section you can add to the ReadMe.

Thanks for all the hard work!

### Customizing Icons

In order to customize the icons in order to change their color, size, etc, you should make a CSS snippet.

To do this, follow the following steps:

1. Go to Settings -> Appearance -> CSS Snippets 
2. Turn on the CSS Snippets option and then click the folder to navigate to it's folder.
3. Make a new file called icons.css
4. Open icons.css in your preferred text editor
5. Add the following:
	```
	.obsidian-icon {
  		... changes go here.
	}
	```
6. Go Back to Settings -> Appearance -> CSS Snippets
7. Click the reload button
8. A button with the title "icons" should appear, turn it on.

Your changes will now be applied and you can edit the file when you want.

Support Obsidian Publish

Currently, this plugin does not support Obsidian Publish. Icons only work inside the Obsidian app. Add support for Obsidian Publish.

Fuzzymodal loads very slow. Set a limit!

To improve the performance of FuzzyModal drastically make the following change in code. Currently, with all fonts turned on icons search opens painfully slow.

Change this:

constructor(app: App, plugin: IconsPlugin, settings: IconsPluginSettings) {
super(app)
this.plugin = plugin
this.settings = settings
}

To this:

 constructor(app: App, plugin: IconsPlugin, settings: IconsPluginSettings) { 
   super(app) 
   this.limit = 20;
   this.plugin = plugin 
   this.settings = settings 
 } 

Keyboard shortcut override inspector

Hello, I noticed that the keyboard shortcut to trigger the icon picker is Ctrl+Shift+i.

The same shortcut is used to open the web inspector useful for theming/troubleshooting.

Would it be possible to change the shortcut to something different? I'm experiencing this on Linux, I would expect the same happens on Windows. I'm not sure this applies to MacOS as well.

Icons are not rendered on IOS mobile app

Now the mobile app is out of testing and available in the app store, I am now using the official IOS Obsidian app. Unfortunately, the icons are not rendered on mobile. Any chance you could look into this?

Icons for folders are always black

Thanks for the plugin! Not sure if I'm doing something wrong, but if I change the icon for any folder, it's always black, which is not nice for the dark theme.

Is it possible to make it white?

I've tried CSS snippet but it doesn't change anything.

Thanks.

Nothing is showing at all

I've tried various icons and all it keeps showing is the snippet code for the icon or whatever its called such as : ris:AncientGate
fas:Airbnb

I've tried with having the default theme and no other plugins to see if there are any confclits and still no icons appear even after reloading obsidian. I'm using the latest versions of everything Obsidian version 0.13.23

Plugin does not work on mobile

After installing the plugin on iOS or iPadOS, it can't be activated because it does not "support your device".

As reported in #12 icons aren't rendered even if added from desktop

aws cloud icons

I work a lot on AWS cloud and having their icon set added would be really amazing. They do publish all their architectural icons.
aws icons

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.