Feature request: Allow custom aliasing in the javascript imports

[WilliamStam]

Is your feature request related to a problem?

want to use an icon with a custom alias so that should the icon ever change the icon in the code base remains the same. no more find and replace and have a bad time of things

Feature description

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
    faPlusSquare as myRockStar
} from '@fortawesome/free-regular-svg-icons'
library.add(
    myRockStar
)
export {FontAwesomeIcon};

and usage

<font-awesome-icon icon="my-rock-star"></font-awesome-icon>

Alternatives

Considered a custom component for font awesome. if the icon matches a pre populated list then use those icons (so only having to keep that list up to date). this "works" but i feel that this would be better in FA natively tho.

Additional context

using VUE3 but im sure this impacts all the imports where they are using javascript

(wow there are a lot of issue pages to go through. sorry if i missed a place where this was discussed already)

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

[WilliamStam]

for vue my "workaround" is as follows:

// main.ts
import Icon from "@/components/Icon.vue";

const app = createApp(App);
app.component("icon", Icon);
app.mount("#app");

// usage
<icon icon="my-rock-star"></icon>

// Icon.vue component
<template>
    <font-awesome-icon :icon="icon"></font-awesome-icon>
</template>
<script setup>
import {
    ref
} from "vue";
import {FontAwesomeIcon} from '@/icons';
const transform = {
    "my-rock-star": "fa-solid fa-share"
}
const props = defineProps(["icon"]);
const icon = ref(props.icon);
if (transform[props.icon] !== "undefined"){
    icon.value = transform[props.icon]
}
</script>

the import {FontAwesomeIcon} from '@/icons'; just imports it normally like the vue docs on font-awesome say. im just adding a wrapper around the fa component and changing the 1 prop

please note that this just feels "wrong", im only including it in-case someone else needs a solution. so please consider allowing custom aliasing as per my OP.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I don't know how this could possibly be implemented, because it should infer the name of the icon from the variable name itself, which is subject to changes after minification

Anyway, a simpler workaround using a non-public API (so this will be subject to changes) could be to edit the list of aliases like

import { faListCheck } from "@fortawesome/free-solid-svg-icons";

faListCheck.icon[2].push("my-icon");

I'm not a fan of magic numbers, so maybe there is room for improvement in this API, at least by using constants

https://codesandbox.io/s/elated-smoke-iuymr?file=/src/main.js:194-297