There are several ways of adding SVG images when coding blocks in Snowfire. It is of course possible to upload them in Assets and use it within an <img> tag. But we recommend adding the SVG image in your CSS since it gives you more power to change the image dynamically.
This is an example on how to add an SVG image in your CSS as a background-image.
.icon {
position: relative;
padding-right: 20px;
margin-left: 24px;
padding-left: 4px;
&:before {
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9c0 .753-.165 1.44-.464 2.047-1.025 2.716-3.492 6.241-4.747 7.944a.946.946 0 01-1.53.005c-1.278-1.712-3.803-5.274-4.82-7.999A4.604 4.604 0 016 9c0-3.038 2.686-6 6-6s6 2.962 6 6zm-5.973 1a2 2 0 100-4 2 2 0 000 4z" fill="{svgcolor:$icon}"/></svg>');
content: '';
position: absolute;
left: -24px;
top: -3px;
display: block;
width: 24px;
height: 24px;
}
}
If you want to add your own SVG code, remember to replace fill="#fff..." with fill="{svgcolor:$icon}" and add the following property:
<color variable="$icon" default="rgba(0, 0, 0, 1)" kind="icon" force-reload="true" alpha-disabled="true" />
Using force-reload instructs the user to save changes to view the new color since it requires a browser refresh. The alpha-disabled property makes sure it is impossible to define an alpha for this color since this isn't supported when working with SVG fill colors.