Feature request: Isolate concurrent instances of @fortawesome/fontawesome-svg-core

[denke8]

Is your feature request related to a problem?

In a widget or micro-frontend environment, if multiple FontAwesome instances are present (in separate bundles, with different versions, i.e., v6 and v7) their injected styles conflict.

An example of this is the .svg-inline--fa class, that does not seem to be affected with the cssPrefix configuration option. The V7 version seems to define width that alters the design of the v6 instance.

The second problem is, that the svg-core package uses and sets the configuration object by reference. This way, all the instances have the same configuration object, with no practical way of defining a separate configuration object for each of the instances.

Feature description

• Since the svg-core package exposes the configuration object under the named export config there should be a way to either separate the reference from window.FontAwesomeConfig, or would be even better if it created a cloned version of the config for it's internal use (that is also exported) in the first place.

• the same thing may also be true for window.___FONT_AWESOME___

• Unless I'm mistaken .svg-inline--fa should also be affected by the cssPrefix option

Alternatives

I have tried to separate the window attributes by hand, by the use of ambient code in two separate JS files

isolate.js

export const wasConfigDefined = 'FontAwesomeConfig' in window;
export const originalConfig = window.FontAwesomeConfig;
export const wasNamespaceDefined = '___FONT_AWESOME___' in window;
export const originalNamespace = window.___FONT_AWESOME___;

delete window.FontAwesomeConfig;
delete window.___FONT_AWESOME___;

initialize.js

import {
  wasConfigDefined,
  originalConfig,
  wasNamespaceDefined,
  originalNamespace,
} from './isolate';
import { config as faSvgCoreConfig } from '@fortawesome/fontawesome-svg-core';

faSvgCoreConfig.autoReplaceSvg = faSvgCoreConfig.autoReplaceSvg ?? false;

if (wasConfigDefined) {
  window.FontAwesomeConfig = originalConfig;
} else {
  delete window.FontAwesomeConfig;
}

if (wasNamespaceDefined) {
  window.___FONT_AWESOME___ = originalNamespace;
} else {
  delete window.___FONT_AWESOME___;
}

// Configure isolated instance here by mutating  `faSvgCoreConfig`

These need to be separated into different files, so the code is executed in the correct order. This solution is quite far from ideal

Additional context

No response

Feature request checklist

• The title starts with "Feature request: " and is followed by the requested feature description
• This is a single feature
• I have searched for existing issues and to the best of my knowledge this is not a duplicate