Obsidian Icon Folder

What is it?

This obsidian plugin allows you to add any custom icon (of type .svg) or from an icon pack to your folder or file.

Right now, the current predefined icon packs are supported and can be downloaded:

• Remixicon
• Fontawesome
• Twemoji

However, feel free to add your own icon packs!

How to use

There are different functionalities of displaying an icon for your folder or file.

First of all, you need to go to the settings and download predefined icon packs or create your own.

In addition, it is possible to drag and drop or select multiple files to your customized icon pack.

Moreover, you can adjust some styling settings for all the icons like padding, color, or even the icon size.

Changing icon of the folder

It is pretty simple to add an icon to your folder:

1. Right click on the folder where you want to add an icon
2. Select the Change Icon menu item (prefixed with a # icon)
3. Select the icon you want and profit!

To delete an icon, you just need to click on the Delete Icon (prefixed with a trash icon) menu item.

Inherit Icon

This functionality lets you define an inherit icon for a specific folder. When you add a file to this folder, the created file will inherit this icon. In addition, all files in the folder will have this specific inherited icon.

To apply an inherited icon:

1. Right-click the folder
2. Use the Inherit icon menu entry
3. For removing: just right-click again and click Remove inherit icon

Using Twemoji for Emojis as folders

Twemoji is a popular library to add universal emojis to your application. With the help of this library, you can now set an emoji as your folder icon. Just follow these steps:

1. Right-click the folder
2. Click Change icon
3. Open your OS-specific emoji dialog
   1. Mac OSX: Control + Command + Space
   2. Windows: Windows + ;
4. Select the option Use twemoji emoji

Migration

If you used a previous version of this plugin. Please follow this guide to migrate to the newest version which allows customizable icon packs.

A migration script will run, whenever you haven't migrated yet. Therefore, all icons should be gone for your vault. However, you can easily install or create icon packs you used. For example, when you used the font-awesome-solid pack, you can easily download it in the settings and restart your vault. Every icon of this pack should now be visible.

Development

To customize this project for your needs, you can clone it and then install all dependencies:

$ git clone https://github.com/FlorianWoelki/obsidian-icon-folder
$ cd obsidian-icon-folder
$ yarn

After executing successfully, you can start the rollup dev server by using:

$ yarn dev

This command will automatically build the neccesary files for testing and developing on every change.

Also, make sure that you copy the built files into the the plugins directory.

For example:

$ cp main.js manifest.json src/styles.css /<path-to-obsidian-vault>/.obsidian/plugins/obsidian-icon-folder

Finally, you can customize the plugin and add it to your plugins.