/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer_public/89/1e/891e92d0-6728-47c3-b935-f279f604f40c/gettyimages-1962575656_web.jpg?#)
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: Don't: Use currentColor: For any strokes or fills that should inherit the color from Umbraco's theme, use currentColor. Do: Don't: 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.
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/iconsfolder 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:
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Don't:
xmlns="http://www.w3.org/2000/svg" width="24" height="24">
Use currentColor:
For any strokes or fills that should inherit the color from Umbraco's theme, use currentColor.
Do:
d="M12 12L12 12" stroke="currentColor" stroke-width="2"/>
Don't:
d="M12 12L12 12" stroke="#283a97" stroke-width="2"/>
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.
