|
| 1 | +import { IconifyIcon } from '@iconify/types'; |
| 2 | +import { IconifyJSON } from '@iconify/types'; |
| 3 | +import { IconifyTransformations } from '@iconify/types'; |
| 4 | + |
| 5 | +/** |
| 6 | + * Icon render modes |
| 7 | + * |
| 8 | + * 'bg' = SPAN with style using `background` |
| 9 | + * 'mask' = SPAN with style using `mask` |
| 10 | + * 'svg' = SVG |
| 11 | + */ |
| 12 | +declare type ActualRenderMode = 'bg' | 'mask' | 'svg'; |
| 13 | + |
| 14 | +export declare const addAPIProvider: (provider: string, customConfig: PartialIconifyAPIConfig) => boolean; |
| 15 | + |
| 16 | +export declare const addCollection: (data: IconifyJSON, provider?: string) => boolean; |
| 17 | + |
| 18 | +export declare const addIcon: (name: string, data: IconifyIcon | null) => boolean; |
| 19 | + |
| 20 | +export declare const _api: IconifyAPIInternalFunctions; |
| 21 | + |
| 22 | +/** |
| 23 | + * Set custom style to add to all components |
| 24 | + * |
| 25 | + * Affects only components rendered after function call |
| 26 | + */ |
| 27 | +export declare function appendCustomStyle(style: string): void; |
| 28 | + |
| 29 | +export declare const buildIcon: (icon: IconifyIcon, customisations?: IconifyIconCustomisations) => IconifyIconBuildResult; |
| 30 | + |
| 31 | +export declare const calculateSize: (size: string | number, ratio: number, precision?: number) => string | number; |
| 32 | + |
| 33 | +/** |
| 34 | + * Signature for getAPIConfig |
| 35 | + */ |
| 36 | +export declare type GetAPIConfig = (provider: string) => IconifyAPIConfig | undefined; |
| 37 | + |
| 38 | +export declare const getIcon: (name: string) => Required<IconifyIcon> | null | undefined; |
| 39 | + |
| 40 | +/** |
| 41 | + * API config |
| 42 | + */ |
| 43 | +export declare interface IconifyAPIConfig extends RedundancyConfig { |
| 44 | + path: string; |
| 45 | + maxURL: number; |
| 46 | +} |
| 47 | + |
| 48 | +export declare interface IconifyAPICustomQueryParams { |
| 49 | + type: 'custom'; |
| 50 | + provider?: string; |
| 51 | + uri: string; |
| 52 | +} |
| 53 | + |
| 54 | +/** |
| 55 | + * Iconify API functions |
| 56 | + */ |
| 57 | +export declare interface IconifyAPIFunctions { |
| 58 | + /** |
| 59 | + * Load icons |
| 60 | + */ |
| 61 | + loadIcons: (icons: (IconifyIconName | string)[], callback?: IconifyIconLoaderCallback) => IconifyIconLoaderAbort; |
| 62 | + /** |
| 63 | + * Load one icon, using Promise syntax |
| 64 | + */ |
| 65 | + loadIcon: (icon: IconifyIconName | string) => Promise<Required<IconifyIcon>>; |
| 66 | + /** |
| 67 | + * Add API provider |
| 68 | + */ |
| 69 | + addAPIProvider: (provider: string, customConfig: PartialIconifyAPIConfig) => boolean; |
| 70 | + /** |
| 71 | + * Set custom loader for multple icons |
| 72 | + */ |
| 73 | + setCustomIconsLoader: (callback: IconifyCustomIconsLoader, prefix: string, provider?: string) => void; |
| 74 | + /** |
| 75 | + * Set custom loader for one icon |
| 76 | + */ |
| 77 | + setCustomIconLoader: (callback: IconifyCustomIconLoader, prefix: string, provider?: string) => void; |
| 78 | +} |
| 79 | + |
| 80 | +/** |
| 81 | + * Params for sendQuery() |
| 82 | + */ |
| 83 | +declare interface IconifyAPIIconsQueryParams { |
| 84 | + type: 'icons'; |
| 85 | + provider: string; |
| 86 | + prefix: string; |
| 87 | + icons: string[]; |
| 88 | +} |
| 89 | + |
| 90 | +/** |
| 91 | + * Exposed internal functions |
| 92 | + * |
| 93 | + * Used by plug-ins, such as Icon Finder |
| 94 | + * |
| 95 | + * Important: any changes published in a release must be backwards compatible. |
| 96 | + */ |
| 97 | +export declare interface IconifyAPIInternalFunctions { |
| 98 | + /** |
| 99 | + * Get API config, used by custom modules |
| 100 | + */ |
| 101 | + getAPIConfig: GetAPIConfig; |
| 102 | + /** |
| 103 | + * Set custom API module |
| 104 | + */ |
| 105 | + setAPIModule: (provider: string, item: IconifyAPIModule) => void; |
| 106 | + /** |
| 107 | + * Send API query |
| 108 | + */ |
| 109 | + sendAPIQuery: (target: string | PartialIconifyAPIConfig, query: IconifyAPIQueryParams, callback: QueryDoneCallback) => QueryAbortCallback; |
| 110 | + /** |
| 111 | + * Set and get fetch() |
| 112 | + */ |
| 113 | + setFetch: (item: typeof fetch) => void; |
| 114 | + getFetch: () => typeof fetch | undefined; |
| 115 | + /** |
| 116 | + * List all API providers (from config) |
| 117 | + */ |
| 118 | + listAPIProviders: () => string[]; |
| 119 | +} |
| 120 | + |
| 121 | +/** |
| 122 | + * API modules |
| 123 | + */ |
| 124 | +export declare interface IconifyAPIModule { |
| 125 | + prepare: IconifyAPIPrepareIconsQuery; |
| 126 | + send: IconifyAPISendQuery; |
| 127 | +} |
| 128 | + |
| 129 | +/** |
| 130 | + * Functions to implement in module |
| 131 | + */ |
| 132 | +export declare type IconifyAPIPrepareIconsQuery = (provider: string, prefix: string, icons: string[]) => IconifyAPIIconsQueryParams[]; |
| 133 | + |
| 134 | +export declare type IconifyAPIQueryParams = IconifyAPIIconsQueryParams | IconifyAPICustomQueryParams; |
| 135 | + |
| 136 | +export declare type IconifyAPISendQuery = (host: string, params: IconifyAPIQueryParams, callback: QueryModuleResponse) => void; |
| 137 | + |
| 138 | +/** |
| 139 | + * Interface for exported builder functions |
| 140 | + */ |
| 141 | +export declare interface IconifyBuilderFunctions { |
| 142 | + replaceIDs?: (body: string, prefix?: string | (() => string)) => string; |
| 143 | + calculateSize: (size: string | number, ratio: number, precision?: number) => string | number; |
| 144 | + buildIcon: (icon: IconifyIcon, customisations?: IconifyIconCustomisations) => IconifyIconBuildResult; |
| 145 | +} |
| 146 | + |
| 147 | +/** |
| 148 | + * Custom loader for one icon |
| 149 | + */ |
| 150 | +export declare type IconifyCustomIconLoader = (name: string, prefix: string, provider: string) => Promise<IconifyIcon | null> | IconifyIcon | null; |
| 151 | + |
| 152 | +/** |
| 153 | + * Custom icons loader |
| 154 | + */ |
| 155 | +export declare type IconifyCustomIconsLoader = (icons: string[], prefix: string, provider: string) => Promise<IconifyJSON | null> | IconifyJSON | null; |
| 156 | + |
| 157 | +/** |
| 158 | + * Interface for exported functions |
| 159 | + */ |
| 160 | +declare interface IconifyExportedFunctions extends IconifyStorageFunctions, IconifyBuilderFunctions, IconifyAPIFunctions { |
| 161 | + _api: IconifyAPIInternalFunctions; |
| 162 | + appendCustomStyle: (value: string) => void; |
| 163 | + iconToHTML: (body: string, attributes: Record<string, string>) => string; |
| 164 | + svgToURL: (svg: string) => string; |
| 165 | +} |
| 166 | + |
| 167 | +export { IconifyIcon } |
| 168 | + |
| 169 | +/** |
| 170 | + * Attributes as properties |
| 171 | + */ |
| 172 | +export declare interface IconifyIconAttributes extends Partial<Record<keyof Omit<IconifyIconProperties, 'icon' | 'mode'>, string>>, Partial<IconifyIconSVGAttributes> { |
| 173 | + icon: string; |
| 174 | + mode?: IconifyRenderMode; |
| 175 | +} |
| 176 | + |
| 177 | +/** |
| 178 | + * Interface for getSVGData() result |
| 179 | + */ |
| 180 | +export declare interface IconifyIconBuildResult { |
| 181 | + attributes: { |
| 182 | + width?: string; |
| 183 | + height?: string; |
| 184 | + viewBox: string; |
| 185 | + }; |
| 186 | + viewBox: SVGViewBox; |
| 187 | + body: string; |
| 188 | +} |
| 189 | + |
| 190 | +/** |
| 191 | + * Create exported data: either component instance or functions |
| 192 | + */ |
| 193 | +export declare const IconifyIconComponent: IconifyExportedFunctions; |
| 194 | + |
| 195 | +/** |
| 196 | + * Icon customisations |
| 197 | + */ |
| 198 | +declare type IconifyIconCustomisationProperties = { |
| 199 | + width?: string | number; |
| 200 | + height?: string | number; |
| 201 | + rotate?: string | number; |
| 202 | + flip?: string; |
| 203 | +}; |
| 204 | + |
| 205 | +/** |
| 206 | + * Icon customisations |
| 207 | + */ |
| 208 | +export declare interface IconifyIconCustomisations extends IconifyTransformations, IconifyIconSizeCustomisations { |
| 209 | +} |
| 210 | + |
| 211 | +export declare interface IconifyIconHTMLElement extends PartialIconifyIconHTMLElement, IconifyExportedFunctions, Required<IconifyIconProperties> { |
| 212 | +} |
| 213 | + |
| 214 | +export declare interface IconifyIconHTMLElementClass extends IconifyExportedFunctions { |
| 215 | + new (): IconifyIconHTMLElement; |
| 216 | + prototype: IconifyIconHTMLElement; |
| 217 | +} |
| 218 | + |
| 219 | +/** |
| 220 | + * Function to abort loading (usually just removes callback because loading is already in progress) |
| 221 | + */ |
| 222 | +export declare type IconifyIconLoaderAbort = () => void; |
| 223 | + |
| 224 | +/** |
| 225 | + * Loader callback |
| 226 | + * |
| 227 | + * Provides list of icons that have been loaded |
| 228 | + */ |
| 229 | +export declare type IconifyIconLoaderCallback = (loaded: IconifyIconName[], missing: IconifyIconName[], pending: IconifyIconName[], unsubscribe: IconifyIconLoaderAbort) => void; |
| 230 | + |
| 231 | +/** |
| 232 | + * Icon name |
| 233 | + */ |
| 234 | +export declare interface IconifyIconName { |
| 235 | + readonly provider: string; |
| 236 | + readonly prefix: string; |
| 237 | + readonly name: string; |
| 238 | +} |
| 239 | + |
| 240 | +/** |
| 241 | + * All properties |
| 242 | + */ |
| 243 | +export declare interface IconifyIconProperties extends IconifyIconCustomisationProperties, Partial<IconifyIconSVGAttributes> { |
| 244 | + icon: string | IconifyIcon; |
| 245 | + mode?: IconifyRenderMode; |
| 246 | + inline?: boolean; |
| 247 | + noobserver?: boolean; |
| 248 | +} |
| 249 | + |
| 250 | +/** |
| 251 | + * Icon size |
| 252 | + */ |
| 253 | +export declare type IconifyIconSize = null | string | number; |
| 254 | + |
| 255 | +/** |
| 256 | + * Dimensions |
| 257 | + */ |
| 258 | +declare interface IconifyIconSizeCustomisations { |
| 259 | + width?: IconifyIconSize; |
| 260 | + height?: IconifyIconSize; |
| 261 | +} |
| 262 | + |
| 263 | +/** |
| 264 | + * Icon status |
| 265 | + */ |
| 266 | +declare type IconifyIconStatus = 'rendered' | 'loading' | 'failed'; |
| 267 | + |
| 268 | +/** |
| 269 | + * SVG attributes that can be overwritten |
| 270 | + */ |
| 271 | +declare interface IconifyIconSVGAttributes { |
| 272 | + preserveAspectRatio: string; |
| 273 | +} |
| 274 | + |
| 275 | +export { IconifyJSON } |
| 276 | + |
| 277 | +/** |
| 278 | + * Extra render modes |
| 279 | + * |
| 280 | + * 'style' = 'bg' or 'mask', depending on icon content |
| 281 | + */ |
| 282 | +export declare type IconifyRenderMode = 'style' | ActualRenderMode; |
| 283 | + |
| 284 | +/** |
| 285 | + * Interface for exported storage functions |
| 286 | + */ |
| 287 | +export declare interface IconifyStorageFunctions { |
| 288 | + /** |
| 289 | + * Check if icon data is available |
| 290 | + */ |
| 291 | + iconLoaded: (name: string) => boolean; |
| 292 | + /** |
| 293 | + * Get icon data with all properties |
| 294 | + * |
| 295 | + * Returns null if icon is missing (attempted to load, but failed) |
| 296 | + * Returns undefined if icon was not loaded |
| 297 | + */ |
| 298 | + getIcon: (name: string) => Required<IconifyIcon> | null | undefined; |
| 299 | + /** |
| 300 | + * List all available icons |
| 301 | + */ |
| 302 | + listIcons: (provider?: string, prefix?: string) => string[]; |
| 303 | + /** |
| 304 | + * Add icon to storage |
| 305 | + * |
| 306 | + * Data is null if icon is missing |
| 307 | + */ |
| 308 | + addIcon: (name: string, data: IconifyIcon | null) => boolean; |
| 309 | + /** |
| 310 | + * Add icon set to storage |
| 311 | + */ |
| 312 | + addCollection: (data: IconifyJSON, provider?: string) => boolean; |
| 313 | +} |
| 314 | + |
| 315 | +export declare const iconLoaded: (name: string) => boolean; |
| 316 | + |
| 317 | +export declare const iconToHTML: (body: string, attributes: Record<string, string>) => string; |
| 318 | + |
| 319 | +export declare const listIcons: (provider?: string, prefix?: string) => string[]; |
| 320 | + |
| 321 | +export declare const loadIcon: (icon: IconifyIconName | string) => Promise<Required<IconifyIcon>>; |
| 322 | + |
| 323 | +export declare const loadIcons: (icons: (IconifyIconName | string)[], callback?: IconifyIconLoaderCallback) => IconifyIconLoaderAbort; |
| 324 | + |
| 325 | +export declare type PartialIconifyAPIConfig = Partial<IconifyAPIConfig> & Pick<IconifyAPIConfig, 'resources'>; |
| 326 | + |
| 327 | +/** |
| 328 | + * Interface |
| 329 | + */ |
| 330 | +declare interface PartialIconifyIconHTMLElement extends HTMLElement { |
| 331 | + restartAnimation: () => void; |
| 332 | + get status(): IconifyIconStatus; |
| 333 | +} |
| 334 | + |
| 335 | +/** |
| 336 | + * Callback for "abort" pending item. |
| 337 | + */ |
| 338 | +declare type QueryAbortCallback = () => void; |
| 339 | + |
| 340 | +/** |
| 341 | + * Callback |
| 342 | + * |
| 343 | + * If error is present, something went wrong and data is undefined. If error is undefined, data is set. |
| 344 | + */ |
| 345 | +declare type QueryDoneCallback = (data?: QueryModuleResponseData, error?: QueryModuleResponseData) => void; |
| 346 | + |
| 347 | +declare type QueryModuleResponse = (status: QueryModuleResponseType, data: QueryModuleResponseData) => void; |
| 348 | + |
| 349 | +/** |
| 350 | + * Response from query module |
| 351 | + */ |
| 352 | +declare type QueryModuleResponseData = unknown; |
| 353 | + |
| 354 | +/** |
| 355 | + * Response from query module |
| 356 | + */ |
| 357 | +declare type QueryModuleResponseType = 'success' | 'next' | 'abort'; |
| 358 | + |
| 359 | +/** |
| 360 | + * Configuration object |
| 361 | + */ |
| 362 | +declare interface RedundancyConfig { |
| 363 | + resources: RedundancyResource[]; |
| 364 | + index: number; |
| 365 | + timeout: number; |
| 366 | + rotate: number; |
| 367 | + random: boolean; |
| 368 | + dataAfterTimeout: boolean; |
| 369 | +} |
| 370 | + |
| 371 | +/** |
| 372 | + * Resource to rotate (usually hostname or partial URL) |
| 373 | + */ |
| 374 | +declare type RedundancyResource = string; |
| 375 | + |
| 376 | +export declare const setCustomIconLoader: (callback: IconifyCustomIconLoader, prefix: string, provider?: string) => void; |
| 377 | + |
| 378 | +export declare const setCustomIconsLoader: (callback: IconifyCustomIconsLoader, prefix: string, provider?: string) => void; |
| 379 | + |
| 380 | +export declare const svgToURL: (svg: string) => string; |
| 381 | + |
| 382 | +/** |
| 383 | + * SVG viewBox: x, y, width, height |
| 384 | + */ |
| 385 | +declare type SVGViewBox = [x: number, y: number, width: number, height: number]; |
| 386 | + |
| 387 | +export { } |
| 388 | + |
| 389 | +/** |
| 390 | + * Add custom element to global elements list |
| 391 | + */ |
| 392 | +declare global { |
| 393 | + interface HTMLElementTagNameMap { |
| 394 | + 'iconify-icon': IconifyIconHTMLElement; |
| 395 | + } |
| 396 | +} |
0 commit comments