Skip to content

Support custom icons from an FA Kit in icon component #749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: next
Choose a base branch
from
Draft

Support custom icons from an FA Kit in icon component #749

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac36698
Draft of changes for wa-icon to support custom icons from an FA Kit
robmadole Feb 12, 2025
714250c
Prettier
robmadole Feb 12, 2025
67d8962
Merge branch 'next' into support-fa-kit-custom-icons
claviska May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 43 additions & 39 deletions src/components/icon/library.default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,56 @@
import { getKitCode } from '../../utilities/base-path.js';
import type { IconLibrary } from './library.js';

function getIconUrl(name: string, family: string, variant: string) {
const kitCode = getKitCode();
const isPro = kitCode.length > 0;
let folder = 'solid';

// Classic
if (family === 'classic') {
if (variant === 'thin') folder = 'thin';
if (variant === 'light') folder = 'light';
if (variant === 'regular') folder = 'regular';
if (variant === 'solid') folder = 'solid';
}
type IconFamily = 'classic' | 'duotone' | 'sharp' | 'sharp-duotone';
type IconVariant = 'solid' | 'regular' | 'light' | 'thin' | 'brands';

// Sharp
if (family === 'sharp') {
if (variant === 'thin') folder = 'sharp-thin';
if (variant === 'light') folder = 'sharp-light';
if (variant === 'regular') folder = 'sharp-regular';
if (variant === 'solid') folder = 'sharp-solid';
}
type IconLookup = {
[key in IconFamily]: Partial<Record<IconVariant, string>>;
};

// Duotone
if (family === 'duotone') {
if (variant === 'thin') folder = 'duotone-thin';
if (variant === 'light') folder = 'duotone-light';
if (variant === 'regular') folder = 'duotone-regular';
if (variant === 'solid') folder = 'duotone';
}
const lookup: IconLookup = {
classic: {
solid: 'solid',
regular: 'regular',
light: 'light',
thin: 'thin',
brands: 'brands',
},
duotone: {
solid: 'duotone',
regular: 'duotone-regular',
light: 'duotone-light',
thin: 'duotone-thin',
},
sharp: {
solid: 'sharp-solid',
regular: 'sharp-regular',
light: 'sharp-light',
thin: 'sharp-thin',
},
'sharp-duotone': {
solid: 'sharp-duotone-solid',
regular: 'sharp-duotone-regular',
light: 'sharp-duotone-light',
thin: 'sharp-duotone-thin',
},
};

// Sharp Duotone
if (family === 'sharp-duotone') {
if (variant === 'thin') folder = 'sharp-duotone-thin';
if (variant === 'light') folder = 'sharp-duotone-light';
if (variant === 'regular') folder = 'sharp-duotone-regular';
if (variant === 'solid') folder = 'sharp-duotone-solid';
}
const version = '6.7.2';

function getIconUrl(name: string, family: string, variant: string) {
const kitCode = getKitCode();
// TODO this is not a good indicator of if the Kit is pro
const isPro = kitCode.length > 0;
let folder = (lookup as Record<string, Record<string, string>>)?.[family]?.[variant] ?? 'solid';

// Brands
if (family === 'brands') {
folder = 'brands';
if (family === 'kit' || family === 'kit-duotone') {
return `https://kit.fontawesome.com/${kitCode}/icons/${family}/custom/${name}.svg`;
}

// Use the default CDN
return isPro
? `https://ka-p.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
: `https://ka-f.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg`;
? `https://ka-p.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
: `https://ka-f.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg`;
}

const library: IconLibrary = {
Expand Down