[Enhancement]: Allow admin-uploaded icons for libraries

advplyr / audiobookshelf

Self-hosted audiobook and podcast server

https://audiobookshelf.org

GNU General Public License v3.0

6.38k stars 450 forks source link

[Enhancement]: Allow admin-uploaded icons for libraries #2993

Open ZLoth opened 4 months ago

ZLoth commented 4 months ago

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

The current set of icons is too limiting. It would be nice to be able to upload a custom icon within a set size limit to the library icon set, then be able to set that library with that icon.

Why would this be helpful?

Due to the large number of books in my collection, I have subdivided my collection into categories including some specific sub-genres. Thus, it would be nice if I could set custom icons such as:

Doctor Who - Blue Police Box
Torchwood - The Torchwood Institute logo
Lord of the Rings - The One Ring
Star Wars - Light Sabre
Star Trek - The logo
Sherlock Holes - Magnifying Glass, Side Silouette

Future Implementation (Screenshot)

No screen shot

Audiobookshelf Server Version

2.9.0

Current Implementation (Screenshot)

BimBimSalaBim commented 4 months ago

I've looked into this and from my understanding this would need to rehaul the whole icon system. Currently icons are in a font generated by icomoon, while it is possible to modify the fonts and the global libraryIcons var, allowing uploads through the UI might be a big task.

files that will need to be modified: client\assets\absicons.css client\components\ui\MediaIconPicker.vue client\store\globals.js

and all the font stuff

advplyr commented 4 months ago

Thanks @BimBimSalaBim that's correct. This is unlikely to be supported.

ZLoth commented 4 months ago

icons are in a font generated by icomoon

This set? https://iconduck.com/sets/icomoon-free-icon-set . If so, then I can look for possibilities

BimBimSalaBim commented 4 months ago

@ZLoth the icon set used is under client/static/fonts/absicons

if you want to just change the icons for yourself its super easy, you just have to import the absicons.svg into IcoMoon and add your icons and export and rename the files back to the original names. Then you just have to add the name into the libraryIcons array on line 81 in client/store/globals.js aswell as adding a component to the client/assets/absicons.css with the unicode name of the icon from the absicons.svg.

hope this helps.