XF 2.3 Force font aswesome icon load

[XFA]

Hi,

Is there a way to tell the fontawesome cache thing at page load to load a set of icon ?
Typically, I have a page where I load all icons for a picker and I can't have them be displayed unless I load the whole css but that wouldn't go the way the software works now.

And the file analyser would not find them as it's done programmatically in a js from an array of icons.

Also, are brand icons supported by the XF.Icon.getIcon function ?

Clément

 

[Kirby]

You can't load duotone icons via XF.Icon.get

Furthermore, loading dozens of icons indivually could / would be a signification performance issue.

There is no CSS load all icons (for a given FA style) and the existing CSS is only build for individual icon use; if you want to use a sprite (of all icons for a FA style) you would have to build that on your own, but keep in mind that the resulting files could get large (> 1MB uncompressed text each for Solid / Light / Regular / Duotone).

You could inline all icons, but that would create create a large HTML output.

<xf:foreach loop="{{ $xf.app.data('XF:FontAwesome').getIconMetadata() }}" key="$name" value="$icon">
    <xf:if is="$icon.is_brand">
        <xf:fa icon="fab fa-{$name}" inline="true" />
    <xf:else />
        <xf:fa icon="fad fa-{$name}" inline="true" />
        <xf:fa icon="far fa-{$name}" inline="true" />
        <xf:fa icon="fas fa-{$name}" inline="true" />
        <xf:fa icon="fal fa-{$name}" inline="true" />
    </xf:if>
</xf:foreach>

IMHO none of these ideas is ideal though, best approach might be to use chunked sprites (eg. put a fixed amout of icons into one sprite and use a many sprites as required to include all icons).

Last but not least I think it doesn't make sense that 3rd party developers implement FA pickers on their own as taht is inefficient and might result in multiple pcikers in one instance.

This really needs to be in core just like asset uploads and color picker; even XF itself could make use of it for option group icons, admin navigation icons and bb code icons.

K

Thread 'Add font awesome icon picker'

Jun 23, 2021

There are quite a few Add-ons and styles that do allow the Admin to configure FA icons for various things.

But as there does not seem to be a supported way to have a FA icon selector in options, style properties etc., developers and designer often just use a text input and store data in various formats.

My suggestion is to make this easier for everybody by providing functionality for a FA icon picker that could be used in options, stylevars, etc.

• Kirby
• Replies: 1
• Forum: XenForo suggestions

• 

 

[Jeremy P]

FWIW I'm planning on shipping some changes to the JS module in the next version which will allow for using duotone/inline icons properly (via fetch), as well as an element handler for using arbitrary icons via data-xf-init. My recommendation for building a JS picker would probably be to require a few search characters first to avoid rendering every single icon at once, which is hard to imagine is especially useful anyway.

 

[XFA]

Thank you for your answers.
I am using an existing FA picker that I had adapted a bit to fit in the xF forms so none of the option would work.

I'll analyse the effort required compared to the benefits

 

[XFA]

@Jeremy P I am not sure to understand exactly the changes you are going to introduce.

Could you elaborate what you meant exactly, do you mean we would be able to dynamically load icons after an ajax call for example thanks to the data-xf-init ?

 

[Jeremy P]

You can get an icon HTML string via JS directly:

const icon = await XF.Icon.getInlineIcon('default', 'alien')

// or ...
XF.Icon.getInlineIcon('default', 'alien')
    .then((icon) =>
    {
        // ...
    })

Or you can use an element handler (works the same as any other JS element handler):

<i class="far fa-alien" data-xf-init="icon"><svg></svg></i>