SVGIcon — Examples
⇠ Go back to GitHub repository
Global options
Following demonstrates alias settings, it is also possible use removeAlias and changeOptions. Changes doesn’t affect already generated icons and the last one isn't testable for style options (library doesn’t supprot dynamic change).
Simple example
Example without applying any other lib feature
<![CDATA[
<svg-icon use="examples_files/icons.svg#comment"></svg-icon>
]]>
Simple example with styling and alias example
You can use setted alias for 'nice'/'type-saving' icons names and styling with predefined css variable --svg-icon-size and color in case your svg icon has setted fill: currentColor.
<![CDATA[
<style>
svg-icon{
--svg-icon-size: 3em;
color: yellow;
}
</style>
<svg-icon use="icon-comment"></svg-icon>
]]>
More styling example
<svg-icon> is by default block element with 'width/height' setted to var(--svg-icon-size, 1em)
<![CDATA[
<style>
*{
--svg-icon-size: 1.5em;
}
button{
background: transparent;
color: coral;
border: 1px solid currentColor;
border-radius: .5em;
font-size: var(--svg-icon-size);
display: flex;
align-items: center;
padding: calc(var(--svg-icon-size) / 6) calc(var(--svg-icon-size) / 3);
transition: all .25s;
cursor: pointer;
outline: none;
}
button:hover{
color: chocolate;
}
button:focus{
outline: dotted #666;
}
svg-icon{
padding-right: calc(var(--svg-icon-size) / 6);
}
</style>
<button>
<svg-icon use="icon-kpi"></svg-icon> Button
</button>
]]>
SVG with multiple colors via CSS vars
This icon has setted colors with: var(--announcements-color1, red) and var(--announcements-color2, currentColor).
<![CDATA[
<style>
svg-icon{
--svg-icon-size: 3em;
color: wheat;
--announcements-color1: lightyellow;
}
</style>
<svg-icon use="icon-announcements"></svg-icon>
]]>