Library

Library - хелпер для хранения импортированных иконок в runtime

Использование

Необходимо импортировать уже созданный экземлрял класса Library под названием library и импортировать иконки через него.

Class Library

Properties

icons
  • type: Record<IconPrefix, Record<IconName, IconDefinition>>
  • default: {}
export type { IconDefinition as FaIconDefinition } from '@fortawesome/fontawesome-common-types';

export enum FA_ICON_PREFIXES {
  SOLID = 'fas',
  LIGHT = 'fal',
  BRAND = 'fab',
  REGULAR = 'far',
  DUOTONE = 'fad',
  THIN = 'fat',
  SHARP_SOLID = 'fass',
  SHARP_REGULAR = 'fasr',
  SHARP_LIGHT = 'fasl',
  KIT = 'fak',
}

export enum CUSTOM_ICON_PREFIXES {
  EDU = 'edu',
}

export type IconPrefix = `${FA_ICON_PREFIXES | CUSTOM_ICON_PREFIXES}`;

export type IconLiteral = `${IconPrefix}/${string}`;

export const ICON_PREFIXES = [
  ...Object.values(FA_ICON_PREFIXES),
  ...Object.values(CUSTOM_ICON_PREFIXES),
] as const;

export interface IconNode {
  tag: string;
  attrs?: Record<string, any>;
  children?: IconNode[];
}
export type RootIconNode = Required<Pick<IconNode, 'children'>> &
  Pick<IconNode, 'attrs'>;

export interface IconLookup {
  prefix: IconPrefix;
  iconName: string;
}

export interface IconDefinition extends IconLookup, RootIconNode {}

export type IconRenderer<N> = (
  tag: string,
  attrs: Record<string, any>,
  children: N[],
) => N;

export type Icons = Record<IconPrefix, Record<string, IconDefinition>>;

get

  • type: (iconLiteral: IconLiteral) => IconDefinition | undefined
  • type: (prefix: IconPrefix, iconName: string) => IconDefinition | undefined

Метод получения IconDefinition импортированной иконки в случае ее наличия

library.get('fas/info-circle');
library.get('fas', 'info-circle');

library.get('custom/angle-down');
library.get('custom', 'angle-down');

add

  • type: (iconLiteral: FaIconDefinition | IconDefinition) => void

Метод регистрация иконки для последущего использования в комопненте Icon

import { faUser as faSolidUser } from '@fortawesome/pro-solid-svg-icons';

import { library, defineIcon } from '#sf/services/icons';

const angleDownIconNode = {
  attrs: {
    viewBox: '0 0 9 13',
  },
  children: [
    {
      tag: 'path',
      attrs: {
        d: 'd',
      },
    },
  ],
};

const eduSolidAngleDown = defineIcon({
  prefix: 'edu',
  iconName: 'angle-down',
  ...angleDownIconNode,
});

library.add(faUser, faSolidUser, eduSolidAngleDown);

reset

  • type: () => void

Обнуляет свойство icons. Иными словами, стирает импорты всех иконок.

Далле library используется для извлечения IconDefinition в компоненте SfIcon через метод get, если в качестве пропа icon передается IconLiteral, IconLookup или [IconPrefix, string]