Can't fix XF.Icon does not support "doutone" variant

[NikitOS]

Affected version

2.3.0 Beta 2

The XF.Icon.getVariantClass and XF.Icon.normalizeIconVariant methods do not support "duotone" variant.

 

[Jeremy P]

It can't, unfortunately, as only inline icons can be styled.

 

[Kirby]

only inline icons can be styled.

Hmm ... styling sprite icons seems to work for me (tested latest versions of Chrome, Opera, Edge and Firefox on Windows; Chrome, Firefox and Samsung Internet on Android).

Am I doing smth. wrong?

 

[Jeremy P]

This is in reference to the JS icon module, which does not produce CSS-based icons. Blink and WebKit don't support styling in <svg>/<use> sprites (though Firefox seems to handle them just fine).

A bit of an aside, but I still haven't been able to get CSS masks to work with sprites on Safari/iOS anyway.

 

[Kirby]

A bit of an aside, but I still haven't been able to get CSS masks to work with sprites on Safari/iOS anyway.

Hmm ... seems to work for me?

<xf:css>
i.far:not(.fa--xf)::after
{
    display: inline-block;
    content: "";
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    width: 1.28571429em;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}
</xf:css>
<xf:js>
XF.createElement('style', {
    textContent: 'i.far.fa-bullhorn:not(.fa--xf)::after { mask-image: url("/xf23/data/local/icons/regular.svg#bullhorn"); -webkit-mask-image: url("/xf23/data/local/icons/regular.svg#bullhorn"); }'
}, document.head);
XF.createElement('style', {
    textContent: 'i.far.fa-ambulance:not(.fa--xf)::after { mask-image: url("/xf23/styles/fa/regular/ambulance.svg"); -webkit-mask-image: url("/xf23/styles/fa/regular/ambulance.svg"); }'
}, document.head);
</xf:js>

Bullhorn (via i, CSS, Sprite): <i style="color:blue" class="far fa-bullhorn"></i><br />
Ambulance (via i, CSS, Single File): <i style="color:red" class="far fa-bullhorn"></i><br />
Bullhorn (via xf:fa): <xf:fa icon="fa-bullhorn" /><br />
Bullhorn (via xf:fa with variable): <xf:set var="$icon" value="fa-ambulance" /><xf:fa icon="{$icon|raw}" /><br />
Bullhorn (via xf:fa with variable, inline): <xf:set var="$icon" value="fa-ambulance" /><xf:fa icon="{$icon|raw}" inline="{{ true }}" /><br />

The screenshot was taken with Safari / iOS 17.2.1 on an iPhone SE 2020

Edit
Lol, sorry for messing up the icon labels - it should have been Bullhorn / Bullhorn / Bullhorn / Ambulance / Ambulance.

 

[NikitOS]

@Kirby, we are talking about duotone icons. Used icons can be styled as a whole, but duotone icons consist of two parts, and styles cannot be applied to them.

 

[Jeremy P]

My reply to Kirby was actually in reference to icons more broadly, sorry to derail the thread. Anyway will have to double check the CSS mask stuff then, thank you for confirming.