Warning
The documentation you are viewing is accurate for OroCommerce version 5.1 and below. An updated guide for version 6.0 will be available soon.
Icons (SVG)
You can use SVG sprite with already defined icons by using the icon’s filename as the fragment identifier (e.g., add-note is #add-note). You can also add, remove or replace the SVG icons in your theme. See the StyleBook to find the list of all defined icons.
Using Icons
Depending on your use case, you can add any SVG icons to your themes by TWIG, HTML templates, or `JS.
Note
You can replace the add-note name in the examples below with any valid icon name. See the complete list of icon names in StyleBook.
In TWIG
{% import '@OroUI/layouts/renderIcon.html.twig' as renderIcon %}
{{ renderIcon.icon({name: 'add-note'}) }}
In HTML Templates
<% let oroui = _.macros('oroui') %>
<%= oroui.renderIcon({
name: 'add-note'
}) %>
In JS
import _ from 'underscore';
const icon = _.macros('oroui::renderIcon')({
name: 'add-note'
});
Adding New Icons to SVG Sprite
Each new icon should be designed on a 24x24 grid, emphasizing simplicity, consistency, and flexibility. Please use the following file structure to add them to your theme:
MyBundle/
Resources/
public/
my-theme/
svg-icons/
my-custom-icon.svg
Replacing SVG Icons
To replace an icon, navigate to the StyleBook to find the name of the icon you want to replace. Next, add a new icon with the same name to your theme using the following file structure (e.g., replacing add-note).
MyBundle/
Resources/
public/
my-theme/
svg-icons/
add-note.svg
Run the following console command to update the SVG sprite:
php bin/console oro:assets:build
Removing SVG Icons
To remove an icon, navigate to StyleBook to find the name of the icon you want to remove. Next, create a Resources/views/layouts/{theme_name}/config/svg-icons.yml
file in your theme and write the following config in it: (e.g., remove add-note).
exclude:
- 'add-note' // svg-icon will be removed from svg-sprite
Run the following console command to update the SVG sprite:
php bin/console oro:assets:build