fix(front/Icon): better match icon type against Lucide Icons full name instead of starting with fa to avoid collisions

This commit is contained in:
Alice Gaudon 2022-03-02 10:22:14 +01:00
parent 0e0e633e08
commit 1e72ec7172
3 changed files with 12 additions and 4 deletions

View File

@ -1,5 +1,7 @@
import {createIcons, icons} from "lucide";
import {toLucideIconsPascalCase} from "../../common/StringUtils.js";
let hasAlreadyReplacedIcons = false;
export function replaceIcons(once: boolean): void {
@ -9,3 +11,7 @@ export function replaceIcons(once: boolean): void {
hasAlreadyReplacedIcons = true;
}
}
export function isLucideIcon(iconName: string): boolean {
return Object.keys(icons).indexOf(toLucideIconsPascalCase(iconName)) >= 0;
}

View File

@ -1,5 +1,5 @@
<script lang="ts">
import {replaceIcons} from "../../ts/icons.js";
import {replaceIcons, isLucideIcon} from "../../ts/icons.js";
import {afterUpdate, onMount} from "svelte";
export let name: string;
@ -39,9 +39,9 @@
</style>
{#if name}
{#if name.startsWith('fa') }
<i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
{:else}
{#if isLucideIcon(name) >= 0 }
<i icon-name="{name}" class="icon" aria-hidden="true" {...$$restProps}></i>
{:else}
<i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
{/if}
{/if}

View File

@ -0,0 +1,2 @@
export const toLucideIconsPascalCase = (string: string): string =>
string.replace(/(\w)(\w*)(_|-|\s*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase());