DEV Community

Cover image for Say Goodbye to Tedious Icon Imports in Umbraco with Icoover!
Søren Kottal
Søren Kottal

Posted on

2 1 1

Say Goodbye to Tedious Icon Imports in Umbraco with Icoover!

We all know how important icons are for a clean and intuitive backoffice
experience in Umbraco. They help content editors quickly identify document
types, elements, and actions, making their lives easier. But manually
importing and managing those icons? That can be a real time-sink.

That's why I'm thrilled to introduce Icoover, a new Umbraco package
designed to automate the process of importing SVG icons into your Umbraco
backoffice. Say goodbye to the days of manually adding icons one by one!

What is Icoover?

Icoover is a simple yet powerful package that automatically imports SVG icons
from a dedicated folder within your Umbraco project. Just drop your SVG files
into the designated directory, restart Umbraco, and boom! Your icons are
ready to be used across your document types and the entire backoffice.

Key Features:

  • Automatic Import: Icoover automatically detects and imports SVG icons, eliminating manual uploads.
  • Simple Setup: Just install the package and add your icons to the correct folder. Icoover automatically "hoovers" up SVG files in the App_Plugins/Icoover/icons folder and imports them into Umbraco.

Best Practices for SVG Icons in Umbraco

To ensure your icons render correctly and are fully customizable within the Umbraco backoffice, keep these tips in mind:

Use viewBox:

Instead of setting width and height attributes on your root SVG element, use viewBox. This allows Umbraco to handle the sizing of the icon dynamically.

Do:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Enter fullscreen mode Exit fullscreen mode

Don't:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
Enter fullscreen mode Exit fullscreen mode

Use currentColor:

For any strokes or fills that should inherit the color from Umbraco's theme, use currentColor.

Do:

<path d="M12 12L12 12" stroke="currentColor" stroke-width="2"/>
Enter fullscreen mode Exit fullscreen mode

Don't:

<path d="M12 12L12 12" stroke="#283a97" stroke-width="2"/>
Enter fullscreen mode Exit fullscreen mode

Icoover is designed to simplify your Umbraco development workflow by automating the icon import process. Give it a try and let me know what you think! I hope this package saves you valuable time and makes your Umbraco projects even better.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

If you found this post useful, consider leaving a ❤️ or a nice comment!

Got it