Using Icons outside of Theme Editor

Comments

5 comments

  • Avatar
    Datsun73

    @BCNL I'm sure there is a better way but, you can use  {% assign name = 'truck' %}{% include 'icon_outline' %} -or- {% include 'icon_solid' %}

    You can use this in any file & just assign which icon using the names in icon snippet you want to use.

    0
    Comment actions Permalink
  • Avatar
    BCNL

    Unfortunatly, this doesn't help as I want to be able to use Icons directly in the RTE, which doesn't allow for Liquid code.

    0
    Comment actions Permalink
  • Avatar
    Datsun73

    Sorry misread that just copy paste this in description editor code mode and switch out the svg and data-icon attribute name as needed just literally worked for me testing it a minute ago

    <span class="icon " data-icon="truck"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>z</title><g id="truck"><path d="M26.39,65.23a5.82,5.82,0,0,0-5.73,4.88,5,5,0,0,0-.09,1v0a5.47,5.47,0,0,0,.1,1,5.82,5.82,0,0,0,11.45,0,5.47,5.47,0,0,0,.1-1v0a5,5,0,0,0-.09-1A5.84,5.84,0,0,0,26.39,65.23Z"></path><path d="M72.37,65.23a5.84,5.84,0,0,0-5.74,4.83,5.6,5.6,0,0,0,0,2,5.83,5.83,0,0,0,11.48,0,5.6,5.6,0,0,0,0-2A5.84,5.84,0,0,0,72.37,65.23Z"></path><path d="M88.13,48.94l-.27-.47-9.73-17a1,1,0,0,0-.87-.5H59V24.11a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1v47a1,1,0,0,0,1,1h5.63a8.26,8.26,0,0,1-.06-1v0c0-.32,0-.64.05-1a9.82,9.82,0,0,1,19.55,0c0,.31,0,.63,0,1v0a8.26,8.26,0,0,1-.06,1H58a1,1,0,0,0,.3,0h4.29c0-.33-.05-.66-.05-1s0-.67.05-1a9.83,9.83,0,0,1,19.56,0c0,.33,0,.66,0,1s0,.67,0,1H89a1,1,0,0,0,1-1v-19ZM69.93,44a.44.44,0,0,1,.44-.43H80.91l5.48,9.32h-16a.44.44,0,0,1-.44-.44Z"></path></g></svg>


    </span>

    0
    Comment actions Permalink
  • Avatar
    Datsun73

    I do not like doing it this way as it adds a bunch of clutter but for your intended purpose it will work until we figure out a better way

    0
    Comment actions Permalink
  • Avatar
    Datsun73

    0
    Comment actions Permalink

Please sign in to leave a comment.