Custom theme (replace with client name)

Color Circle Icon: Url Link 

<!-- Error rendering component -->
<!-- Error: Template /bits/icons/.twig not found -->
<!-- Error: Error: Template /bits/icons/.twig not found
    at /workspaces/app/web/app/themes/custom/node_modules/@frctl/twig/src/adapter.js:156:24
    at new Promise (<anonymous>)
    at TwigAdapter.render (/workspaces/app/web/app/themes/custom/node_modules/@frctl/twig/src/adapter.js:134:16)
    at ComponentSource._renderVariant (/workspaces/app/web/app/themes/custom/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/workspaces/app/web/app/themes/custom/node_modules/co/index.js:65:19) -->
 
<div class="color-circle-icon">
    {% if icon %}
        <span class="color-circle-icon__icon">
            {% include 'bits/icons/'~ icon.name ~'.twig' %}
        </span>
    {% endif %}
</div>
 
{
  "name": "Edit",
  "icon": "url-link"
}
  • Content: 
    .color-circle-icon
    --backgroundColor darkOrange
    --iconColor white

    align-items center
    background-color var(--backgroundColor)
    border 2px solid var(--borderColor)
    border-radius 50%
    display flex
    justify-content center
    height 48px
    width 48px

    &__icon
        display flex

    &__icon > svg > path
        fill var(--iconColor)
  • URL: /components/raw/color-circle-icon/color-circle-icon.styl
  • Filesystem Path: patterns/bits/color-circle-icon/color-circle-icon.styl
  • Size: 370 Bytes

No notes defined.