University of Florida College of the Arts Pattern Library

Color Circle Icon: Blue 

<div class="color-circle-icon color-circle-icon--blue color-circle-icon--big">
    <span class="color-circle-icon__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
            <g id="edit">
                <mask id="mask0_4758_22510" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                    <rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_4758_22510)">
                    <path id="edit_2" d="M3.33333 12.6668H4.26667L10.0167 6.91683L9.08333 5.9835L3.33333 11.7335V12.6668ZM12.8667 5.95016L10.0333 3.15016L10.9667 2.21683C11.2222 1.96127 11.5361 1.8335 11.9083 1.8335C12.2806 1.8335 12.5944 1.96127 12.85 2.21683L13.7833 3.15016C14.0389 3.40572 14.1722 3.71405 14.1833 4.07516C14.1944 4.43627 14.0722 4.74461 13.8167 5.00016L12.8667 5.95016ZM11.9 6.9335L4.83333 14.0002H2V11.1668L9.06667 4.10016L11.9 6.9335Z" fill="white" />
                </g>
            </g>
        </svg>
    </span>
</div>
 
<div class="color-circle-icon color-circle-icon--{{ background|default('orange') }} color-circle-icon--{{ size|default('big') }}">
    {% if icon %}
        <span class="color-circle-icon__icon">
            {% include 'bits/icons/'~ icon.name ~'.twig' %}
        </span>
    {% endif %}
</div>
 
{
  "background": "blue",
  "icon": {
    "name": "edit"
  }
}
  • Content: 
    .color-circle-icon
    --backgroundColor orange
    --iconColor white
    --iconSize 24px

    &--orange
        --backgroundColor orange

    &--blue
        --backgroundColor blue500

    &--small
        --iconSize 16px

    &--big
        --iconSize 24px

    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
        height var(--iconSize)
        width var(--iconSize)

    &__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: 635 Bytes

No notes defined.