<div class="fractal--icons">
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-alert"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-alert</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-arrow-down"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-arrow-down</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-chevron-left"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-chevron-left</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-chevron-right"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-chevron-right</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-excel"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-excel</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-pdf"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-pdf</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-presentation"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-presentation</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-remove"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-remove</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-search"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-search</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-star-8"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-star-8</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-star"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-star</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-text-document"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-text-document</div>
</div>
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#vgr--icon-video"></use></svg>
</div>
<div class="fractal--icon-name">vgr--icon-video</div>
</div>
</div>
<style>
.fractal--icons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fractal--icon-example {
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
min-width: 8rem;
margin: 1rem;
}
.fractal--icon-wrapper {
padding: 1rem;
}
.fractal--icon-wrapper .vgr-icon {
display: block;
margin: 0 auto;
}
.fractal--icon-name {
display: block;
padding: 0 4px 4px;
border-top: 1px solid #eee;
text-align: center;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
</style>
<div class="fractal--icons">
{% for icon in icons %}
<div class="fractal--icon-example">
<div class="fractal--icon-wrapper">
<svg class="vgr-icon" width="32" height="32" {% if iconLabel %} aria-label="{{ iconLabel }}"{% endif %}><use xlink:href="/icons/sprite/icons.svg#{{ icon.id }}"></use></svg>
</div>
<div class="fractal--icon-name">{{ icon.id }}</div>
</div>
{% endfor %}
</div>
<style>
.fractal--icons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fractal--icon-example {
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
min-width: 8rem;
margin: 1rem;
}
.fractal--icon-wrapper {
padding: 1rem;
}
.fractal--icon-wrapper .vgr-icon {
display: block;
margin: 0 auto;
}
.fractal--icon-name {
display: block;
padding: 0 4px 4px;
border-top: 1px solid #eee;
text-align: center;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
</style>
{
"icons": [
{
"id": "vgr--icon-alert"
},
{
"id": "vgr--icon-arrow-down"
},
{
"id": "vgr--icon-chevron-left"
},
{
"id": "vgr--icon-chevron-right"
},
{
"id": "vgr--icon-excel"
},
{
"id": "vgr--icon-pdf"
},
{
"id": "vgr--icon-presentation"
},
{
"id": "vgr--icon-remove"
},
{
"id": "vgr--icon-search"
},
{
"id": "vgr--icon-star-8"
},
{
"id": "vgr--icon-star"
},
{
"id": "vgr--icon-text-document"
},
{
"id": "vgr--icon-video"
}
]
}
There are no notes for this item.