Fixed XF.Icon.getIcon does not support "brands" variant

[NikitOS]

Affected version

2.3.0 Beta 1

As said in the title.

For example, XF.Icon.getIcon('brands', 'airbnb') returns the following:

<i class="fa--xf far fa-airbnb"><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/regular.svg?v=1711360995#airbnb"></use></svg></i>

 

[Lukas W.]

Adding to that, it generally doesn't allow loading any icon that hasn't been specifically exposed through the Icon Builder. It would be nice to have an option to load it directly from the /styles directory, so we can use it for functions such as previewing Icons next to a user input.

It could either be an extra method or an optional parameter on the function. I've used the following code in my add-on to substitute the functionality:

const url = XF.canonicalizeUrl('styles/fa/solid/' + faClass + '.svg', true);

icon.innerHTML = '<i class="fa--xf fa-solid fa-' + faClass + '">'
    + '<img src="'+url +'" style="width: 96px; height: 96px;" />'
    + '</i>'

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.3.0).

Change log:

Support brand icons in JS icon module

There may be a delay before changes are rolled out to the XenForo Community.

 

[Jeremy P]

It would be nice to have an option to load it directly from the /styles directory, so we can use it for functions such as previewing Icons next to a user input.

I've added an XF.Icon.getStandaloneIcon method (which takes the same arguments) for development purposes, with the obvious caveat being it cannot be styled (inherit color) properly. Thanks for the suggestion!

 

[kick]

I've added an XF.Icon.getStandaloneIcon method (which takes the same arguments) for development purposes, with the obvious caveat being it cannot be styled (inherit color) properly. Thanks for the suggestion!

Why is this for release and not second beta?

future XF release (2.3.0).

 

[Jeremy P]

Because I'm sleepy and forgot to write "Beta 2" in the commit message It'll be in beta 2!

 

[Jeremy P]

Quick heads up about some changes to the JS standalone icon functionality in the next version. The XF.Icon.getStandaloneIcon method will be renamed to XF.Icon.getInlineIcon, and it will be asynchronous so you'll need to either await it or chain a then((icon) => ...) callback.

The good news is these changes will enable support for styling, duotone icons, and other use cases.