Component Library

Logo 

<h1>
    random text
    <div class="svg-text">
        <svg class="svg-text__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-checkbox"></use></svg>
    </div>
    random text
</h1>
 
<h1>
    {{ text }}
    <div class="svg-text">
        <svg class="svg-text__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#{{ icon }}"></use></svg>
    </div>
    {{ text }}
</h1>
 
{
  "text": "random text",
  "icon": "icon-checkbox"
}
  • Content: 
    /*
 * Element: Svg-text
 */

.svg-text {
    display: inline-flex;
    align-self: center;

    &__icon {
        height: 1em;
        width: 1em;
        top: 0.125em;
        position: relative;
    }
}
  • URL: /components/raw/svg-text/svg-text.css
  • Filesystem Path: src/01-atoms/svg-text/svg-text.css
  • Size: 205 Bytes

There are no notes for this item.