Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | 2x 2x 2x 2x 2x 2x 2x 2x 8x 2x 3x 3x 3x 20x 19x 22x 22x 19x 3x 2x 2x 2x 979x 2x 2x 10x 10x 6x | export const ICON_SETS = ['utility', 'action', 'standard', 'custom', 'doctype'] as const;
export type IconSet = (typeof ICON_SETS)[number];
export interface IconSetNames {
common: string[];
directional: string[];
}
export type IconsData = Record<string, IconSetNames>;
export const SET_META: Record<IconSet, { title: string; container: 'none' | 'rounded' | 'circle' }> = {
utility: {
title: 'Utility',
container: 'none',
},
action: {
title: 'Action',
container: 'circle',
},
standard: {
title: 'Standard',
container: 'rounded',
},
custom: {
title: 'Custom',
container: 'rounded',
},
doctype: {
title: 'Doctype',
container: 'none',
},
};
/** Intro cards — Standard & Custom are one type, matching the SLDS icons catalog. */
export const CATALOG_TYPE_CARDS: {
id: string;
title: string;
blurb: string;
iconSet: IconSet;
sampleName: string;
}[] = [
{
id: 'utility',
title: 'Utility',
blurb:
'Utility icons are simple, single-color glyphs that identify labels and actions across form factors.',
iconSet: 'utility',
sampleName: 'notification',
},
{
id: 'doctype',
title: 'Doctype',
blurb: 'Doctype icons represent document file formats.',
iconSet: 'doctype',
sampleName: 'link',
},
{
id: 'standard-custom',
title: 'Standard & Custom',
blurb:
'Standard Object and Custom Object icons represent Salesforce entities and objects (e.g., Accounts, Leads, Cases, etc.).',
iconSet: 'standard',
sampleName: 'account',
},
{
id: 'action',
title: 'Action',
blurb: 'Action icons are for use with quick actions on touch-screen devices.',
iconSet: 'action',
sampleName: 'check',
},
];
export interface CatalogIcon {
name: string;
dir: 'common' | 'ltr';
keywords: string;
}
export interface CatalogSection {
set: IconSet;
icons: CatalogIcon[];
}
export const ICONS_ZIP_FILENAME = 'salesforce-lightning-design-system-icons.zip';
export const ICONS_ZIP_PUBLIC_PATH = `/icons/dist/${ICONS_ZIP_FILENAME}`;
export const ICONS_ZIP_RELATIVE_PATH = `icons/dist/${ICONS_ZIP_FILENAME}`;
export const ICONS_ZIP_FALLBACK_URL = `https://v1.lightningdesignsystem.com/assets/downloads/${ICONS_ZIP_FILENAME}`;
export const ICONS_FIGMA_URL = 'https://www.figma.com/community/file/854597149359643291';
/** SVG `header_discounts` → `.slds-icon-standard-header-discounts` */
export function iconColorClass(set: IconSet, name: string): string {
return `slds-icon-${set}-${name.replace(/_/g, '-')}`;
}
export const ICONS_DIST_DIR = 'icons/dist/salesforce-lightning-design-system-icons';
export function previewerIconSrc(
set: IconSet,
name: string,
dir: 'common' | 'ltr',
options?: { relative?: boolean },
): string {
const file = `icons/svg/${set}/${dir}/${name}.svg`;
return options?.relative ? file : `/${file}`;
}
/** `{set}-sprite/svg/symbols.svg#{name}` — matches `scripts/build.ts` sprite output. */
export function previewerSpriteHref(
set: IconSet,
name: string,
options?: { relative?: boolean; rtl?: boolean },
): string {
const sprite = options?.rtl ? 'symbols-rtl.svg' : 'symbols.svg';
const file = `${ICONS_DIST_DIR}/${set}-sprite/svg/${sprite}#${name}`;
return options?.relative ? file : `/${file}`;
}
/** Same-document sprite id — prefixed so it cannot collide with `#${set}-section`. */
export function inlineSpriteSymbolId(set: IconSet, name: string): string {
return `icon-${set}-${name}`;
}
export function inlineSpriteHref(set: IconSet, name: string): string {
return `#${inlineSpriteSymbolId(set, name)}`;
}
export function iconMatchesQuery(name: string, keywords: string, query: string): boolean {
const q = query.trim().toLowerCase();
if (!q) {
return true;
}
return name.toLowerCase().includes(q) || keywords.toLowerCase().includes(q);
}
export function extractIconPaletteCss(source: string): string {
const rules: string[] = [];
const re = /\.slds-icon-(?:standard|action|custom)-[^{]+\{[^{}]+\}/g;
for (const match of source.matchAll(re)) {
rules.push(match[0].trim());
}
return rules.join('\n');
}
export function buildCatalog(
iconsData: IconsData,
keywordsFor: (set: IconSet, name: string) => string,
): CatalogSection[] {
return ICON_SETS.map((set) => {
const names = iconsData[set] ?? { common: [], directional: [] };
return {
set,
icons: [
...names.common.map((name) => ({
name,
dir: 'common' as const,
keywords: keywordsFor(set, name),
})),
...names.directional.map((name) => ({
name,
dir: 'ltr' as const,
keywords: keywordsFor(set, name),
})),
],
};
});
}
|