• A5CWLayout class padding
• CSS Font Icons
• CSS Linked files
• Default size for SVG icons
• Floating label settings
• Local CSS definitions
• Local SVG definitions
• SVG Linked files

Local SVG definitions

Description

Specify any local SVG image definitions you want to include in this component.

Discussion

SVG Icons can be stored in a component using the Local SVG definitions property.

Importing SVG Icons

SVG Icons can be added, either by pasting the SVG into the Import SVG definition dialog or imported from an SVG file or folder.

To add an icon by pasting the SVG definition, use Import SVG definition. The dialog will prompt you for the SVG code that defines the icon as well as an Icon name (required). If you require an example, use the Insert sample link in the Import SVG Definition dialog to insert a sample SVG definition.

Import folder of SVG files

This option allows you to import a folder full of SVG icons.

Previewing SVG Icons

SVG icons added to the Import SVG definition page can be previewed using Preview SVG Icons. The icon(s) will be displayed in the SVG Icon dialog. You can change the fill color and stroke color to preview your icon(s) in different colors.

Converting SVG Icons so they can be Dynamically Colored

The color of SVG icons is typically controlled by two properties of the SVG: fill and stroke. These properties can either be set by attributes in the SVG or by properties in a style attribute. For example:

fill="red" style="fill:red;"

It is common to dynamically change the color of an SVG icon when it is used by setting the fill color or the stroke color on the SVG. For example, you might define the icon for a button using the following setting:

svgIcon=#Iconwrench:24{ fill: red; stroke: blue;}

The intention here is to display the with a red fill color and a blue stroke color. You can only dynamically control the fill and stroke color of an SVG icon (as shown in the above syntax) if the fill and stroke color in the SVG definition are set to 'inherit'. If the fill and stroke color in the SVG definition are set to explicit values, then you will not be able to override these values when you use the SVG icon.

Therefore, after you import SVG you might want to perform a Search and Replace operation to change the fill and stroke color on the SVG to 'inherit' so that you can dynamically set these colors when you use the SVG icons.