audiobookshelf

audiobookshelf copied to clipboard

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)

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

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

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

@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.

@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.

Would this then also work in tandem with the android app? And would I have to do it again on every update?

Would this then also work in tandem with the android app? And would I have to do it again on every update?

I believe you would also need to add the icon to the app.

You should not need to manually redo it every time since you would be running from source. If you create a fork of the repo, you can pull upstream changes every release, and as long as the same files haven't been changed, there wouldn't be any merge conflicts.

will loom into this and try it out I have never forked anything and would have to try out how to change the source of my container without breaking it

But thank you for your help!

will loom into this and try it out I have never forked anything and would have to try out how to change the source of my container without breaking it

For the web client you would either run off a dev environment or rebuild for every update

But for the mobile app you would need to rebuild every time you want an update.

Honestly with how good the whole system is you probably would be fine without getting updates as long as everything you want/use works(new features are always nice).