iconify.d.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. import { IconifyIcon } from '@iconify/types';
  2. import { IconifyJSON } from '@iconify/types';
  3. import { IconifyTransformations } from '@iconify/types';
  4. /**
  5. * Add custom config for provider
  6. */
  7. export declare function addAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
  8. /**
  9. * Add icon set
  10. */
  11. export declare function addCollection(data: IconifyJSON, provider?: string): boolean;
  12. /**
  13. * Add one icon
  14. */
  15. export declare function addIcon(name: string, data: IconifyIcon): boolean;
  16. /**
  17. * Internal API
  18. */
  19. export declare const _api: IconifyAPIInternalFunctions;
  20. declare type BrowserStorageType = 'local' | 'session';
  21. /**
  22. * Get SVG attributes and content from icon + customisations
  23. *
  24. * Does not generate style to make it compatible with frameworks that use objects for style, such as React.
  25. * Instead, it generates 'inline' value. If true, rendering engine should add verticalAlign: -0.125em to icon.
  26. *
  27. * Customisations should be normalised by platform specific parser.
  28. * Result should be converted to <svg> by platform specific parser.
  29. * Use replaceIDs to generate unique IDs for body.
  30. */
  31. export declare function buildIcon(icon: IconifyIcon, customisations?: IconifyIconCustomisations_2): IconifyIconBuildResult;
  32. /**
  33. * Calculate second dimension when only 1 dimension is set
  34. */
  35. export declare function calculateSize(size: string, ratio: number, precision?: number): string;
  36. export declare function calculateSize(size: number, ratio: number, precision?: number): number;
  37. export declare function calculateSize(size: string | number, ratio: number, precision?: number): string | number;
  38. /**
  39. * Disable cache
  40. */
  41. export declare function disableCache(storage: IconifyBrowserCacheType): void;
  42. /**
  43. * Enable cache
  44. */
  45. export declare function enableCache(storage: IconifyBrowserCacheType, enable?: boolean): void;
  46. /**
  47. * Signature for getAPIConfig
  48. */
  49. export declare type GetAPIConfig = (provider: string) => IconifyAPIConfig | undefined;
  50. /**
  51. * Callback
  52. */
  53. declare type GetHTMLElement = () => HTMLElement | null;
  54. /**
  55. * Get full icon
  56. */
  57. export declare function getIcon(name: string): Required<IconifyIcon> | null;
  58. /**
  59. * Get version
  60. */
  61. export declare function getVersion(): string;
  62. /**
  63. * Check if icon exists
  64. */
  65. export declare function iconExists(name: string): boolean;
  66. /**
  67. * Global variable
  68. */
  69. declare const Iconify: IconifyGlobal;
  70. export default Iconify;
  71. /**
  72. * API config
  73. */
  74. export declare interface IconifyAPIConfig extends RedundancyConfig {
  75. path: string;
  76. maxURL: number;
  77. }
  78. export declare interface IconifyAPICustomQueryParams {
  79. type: 'custom';
  80. provider?: string;
  81. uri: string;
  82. }
  83. /**
  84. * Iconify API functions
  85. */
  86. export declare interface IconifyAPIFunctions {
  87. /**
  88. * Load icons
  89. */
  90. loadIcons: (icons: (IconifyIconName | string)[], callback?: IconifyIconLoaderCallback) => IconifyIconLoaderAbort;
  91. /**
  92. * Load one icon, using Promise syntax
  93. */
  94. loadIcon: (icon: IconifyIconName | string) => Promise<Required<IconifyIcon>>;
  95. /**
  96. * Add API provider
  97. */
  98. addAPIProvider: (provider: string, customConfig: PartialIconifyAPIConfig) => boolean;
  99. }
  100. /**
  101. * Params for sendQuery()
  102. */
  103. declare interface IconifyAPIIconsQueryParams {
  104. type: 'icons';
  105. provider: string;
  106. prefix: string;
  107. icons: string[];
  108. }
  109. /**
  110. * Exposed internal functions
  111. *
  112. * Used by plug-ins, such as Icon Finder
  113. *
  114. * Important: any changes published in a release must be backwards compatible.
  115. */
  116. export declare interface IconifyAPIInternalFunctions {
  117. /**
  118. * Get API config, used by custom modules
  119. */
  120. getAPIConfig: GetAPIConfig;
  121. /**
  122. * Set custom API module
  123. */
  124. setAPIModule: (provider: string, item: IconifyAPIModule) => void;
  125. /**
  126. * Send API query
  127. */
  128. sendAPIQuery: (target: string | PartialIconifyAPIConfig, query: IconifyAPIQueryParams, callback: QueryDoneCallback) => QueryAbortCallback;
  129. /**
  130. * Set and get fetch()
  131. */
  132. setFetch: (item: typeof fetch) => void;
  133. getFetch: () => typeof fetch | undefined;
  134. /**
  135. * List all API providers (from config)
  136. */
  137. listAPIProviders: () => string[];
  138. }
  139. /**
  140. * API modules
  141. */
  142. export declare interface IconifyAPIModule {
  143. prepare: IconifyAPIPrepareIconsQuery;
  144. send: IconifyAPISendQuery;
  145. }
  146. /**
  147. * Functions to implement in module
  148. */
  149. export declare type IconifyAPIPrepareIconsQuery = (provider: string, prefix: string, icons: string[]) => IconifyAPIIconsQueryParams[];
  150. export declare type IconifyAPIQueryParams = IconifyAPIIconsQueryParams | IconifyAPICustomQueryParams;
  151. export declare type IconifyAPISendQuery = (host: string, params: IconifyAPIQueryParams, callback: QueryModuleResponse) => void;
  152. /**
  153. * Interface for exported functions
  154. */
  155. export declare interface IconifyBrowserCacheFunctions {
  156. enableCache: (storage: IconifyBrowserCacheType) => void;
  157. disableCache: (storage: IconifyBrowserCacheType) => void;
  158. }
  159. /**
  160. * Cache types
  161. */
  162. export declare type IconifyBrowserCacheType = BrowserStorageType | 'all';
  163. /**
  164. * Interface for exported builder functions
  165. */
  166. export declare interface IconifyBuilderFunctions {
  167. replaceIDs?: (body: string, prefix?: string | (() => string)) => string;
  168. calculateSize: (size: string | number, ratio: number, precision?: number) => string | number;
  169. buildIcon: (icon: IconifyIcon, customisations?: IconifyIconCustomisations_2) => IconifyIconBuildResult;
  170. }
  171. /**
  172. * Iconify interface
  173. */
  174. declare interface IconifyCommonFunctions {
  175. /**
  176. * Get version
  177. */
  178. getVersion: () => string;
  179. /**
  180. * Render icons
  181. */
  182. renderSVG: (name: string, customisations?: IconifyIconCustomisations_2) => SVGElement | null;
  183. renderHTML: (name: string, customisations?: IconifyIconCustomisations_2) => string | null;
  184. /**
  185. * Get icon data
  186. */
  187. renderIcon: (name: string, customisations?: IconifyIconCustomisations_2) => IconifyIconBuildResult | null;
  188. /**
  189. * Scan DOM
  190. */
  191. scan: (root?: HTMLElement) => void;
  192. /**
  193. * Add root node
  194. */
  195. observe: (root: HTMLElement) => void;
  196. /**
  197. * Remove root node
  198. */
  199. stopObserving: (root: HTMLElement) => void;
  200. /**
  201. * Pause observer
  202. */
  203. pauseObserver: (root?: HTMLElement) => void;
  204. /**
  205. * Resume observer
  206. */
  207. resumeObserver: (root?: HTMLElement) => void;
  208. }
  209. /**
  210. * Iconify interface
  211. */
  212. export declare interface IconifyGlobal extends IconifyStorageFunctions, IconifyBuilderFunctions, IconifyCommonFunctions, IconifyBrowserCacheFunctions, IconifyAPIFunctions {
  213. _api: IconifyAPIInternalFunctions;
  214. }
  215. export { IconifyIcon }
  216. /**
  217. * Interface for getSVGData() result
  218. */
  219. export declare interface IconifyIconBuildResult {
  220. attributes: {
  221. width?: string;
  222. height?: string;
  223. viewBox: string;
  224. };
  225. body: string;
  226. }
  227. /**
  228. * Add inline to customisations
  229. */
  230. export declare interface IconifyIconCustomisations extends IconifyIconCustomisations_2 {
  231. inline?: boolean;
  232. }
  233. /**
  234. * Icon customisations
  235. */
  236. declare interface IconifyIconCustomisations_2 extends IconifyTransformations, IconifyIconSizeCustomisations {
  237. }
  238. /**
  239. * Function to abort loading (usually just removes callback because loading is already in progress)
  240. */
  241. export declare type IconifyIconLoaderAbort = () => void;
  242. /**
  243. * Loader callback
  244. *
  245. * Provides list of icons that have been loaded
  246. */
  247. export declare type IconifyIconLoaderCallback = (loaded: IconifyIconName[], missing: IconifyIconName[], pending: IconifyIconName[], unsubscribe: IconifyIconLoaderAbort) => void;
  248. /**
  249. * Icon name
  250. */
  251. export declare interface IconifyIconName {
  252. readonly provider: string;
  253. readonly prefix: string;
  254. readonly name: string;
  255. }
  256. /**
  257. * Icon size
  258. */
  259. export declare type IconifyIconSize = null | string | number;
  260. /**
  261. * Dimensions
  262. */
  263. declare interface IconifyIconSizeCustomisations {
  264. width?: IconifyIconSize;
  265. height?: IconifyIconSize;
  266. }
  267. export { IconifyJSON }
  268. /**
  269. * Function to load icons
  270. */
  271. declare type IconifyLoadIcons = (icons: (IconifyIconName | string)[], callback?: IconifyIconLoaderCallback) => IconifyIconLoaderAbort;
  272. /**
  273. * Icon render mode
  274. *
  275. * 'style' = 'bg' or 'mask', depending on icon content
  276. * 'bg' = add inline style to placeholder using `background`
  277. * 'mask' = add inline style to placeholder using `mask`
  278. * 'svg' = <svg>
  279. */
  280. export declare type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
  281. /**
  282. * Interface for exported storage functions
  283. */
  284. export declare interface IconifyStorageFunctions {
  285. /**
  286. * Check if icon exists
  287. */
  288. iconExists: (name: string) => boolean;
  289. /**
  290. * Get icon data with all properties
  291. */
  292. getIcon: (name: string) => Required<IconifyIcon> | null;
  293. /**
  294. * List all available icons
  295. */
  296. listIcons: (provider?: string, prefix?: string) => string[];
  297. /**
  298. * Add icon to storage
  299. */
  300. addIcon: (name: string, data: IconifyIcon) => boolean;
  301. /**
  302. * Add icon set to storage
  303. */
  304. addCollection: (data: IconifyJSON, provider?: string) => boolean;
  305. }
  306. /**
  307. * List available icons
  308. */
  309. export declare function listIcons(provider?: string, prefix?: string): string[];
  310. /**
  311. * Load one icon using Promise
  312. */
  313. export declare const loadIcon: (icon: IconifyIconName | string) => Promise<Required<IconifyIcon>>;
  314. /**
  315. * Load icons
  316. */
  317. export declare const loadIcons: IconifyLoadIcons;
  318. /**
  319. * Observe node
  320. */
  321. export declare function observe(root: HTMLElement, autoRemove?: boolean): ObservedNode;
  322. /**
  323. * Observed node type
  324. */
  325. declare interface ObservedNode {
  326. node: HTMLElement | GetHTMLElement;
  327. temporary?: boolean;
  328. observer?: {
  329. instance?: MutationObserver;
  330. paused: number;
  331. pendingScan?: unknown;
  332. };
  333. }
  334. export declare type PartialIconifyAPIConfig = Partial<IconifyAPIConfig> & Pick<IconifyAPIConfig, 'resources'>;
  335. /**
  336. * Pause observer
  337. */
  338. export declare function pauseObserver(root?: HTMLElement): void;
  339. /**
  340. * Callback for "abort" pending item.
  341. */
  342. declare type QueryAbortCallback = () => void;
  343. /**
  344. * Callback
  345. *
  346. * If error is present, something went wrong and data is undefined. If error is undefined, data is set.
  347. */
  348. declare type QueryDoneCallback = (data?: QueryModuleResponseData, error?: QueryModuleResponseData) => void;
  349. declare type QueryModuleResponse = (status: QueryModuleResponseType, data: QueryModuleResponseData) => void;
  350. /**
  351. * Response from query module
  352. */
  353. declare type QueryModuleResponseData = unknown;
  354. /**
  355. * Response from query module
  356. */
  357. declare type QueryModuleResponseType = 'success' | 'next' | 'abort';
  358. /**
  359. * Configuration object
  360. */
  361. declare interface RedundancyConfig {
  362. resources: RedundancyResource[];
  363. index: number;
  364. timeout: number;
  365. rotate: number;
  366. random: boolean;
  367. dataAfterTimeout: boolean;
  368. }
  369. /**
  370. * Resource to rotate (usually hostname or partial URL)
  371. */
  372. declare type RedundancyResource = string;
  373. /**
  374. * Generate SVG as string
  375. */
  376. export declare function renderHTML(name: string, customisations?: IconifyIconCustomisations_2): string | null;
  377. /**
  378. * Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
  379. */
  380. export declare function renderIcon(name: string, customisations?: IconifyIconCustomisations_2): IconifyIconBuildResult | null;
  381. /**
  382. * Generate SVG element
  383. */
  384. export declare function renderSVG(name: string, customisations?: IconifyIconCustomisations_2): SVGElement | null;
  385. /**
  386. * IDs usage:
  387. *
  388. * id="{id}"
  389. * xlink:href="#{id}"
  390. * url(#{id})
  391. *
  392. * From SVG animations:
  393. *
  394. * begin="0;{id}.end"
  395. * begin="{id}.end"
  396. * begin="{id}.click"
  397. */
  398. /**
  399. * Replace IDs in SVG output with unique IDs
  400. */
  401. export declare function replaceIDs(body: string, prefix?: string | ((id: string) => string)): string;
  402. /**
  403. * Resume observer
  404. */
  405. export declare function resumeObserver(root?: HTMLElement): void;
  406. /**
  407. * Scan DOM
  408. */
  409. export declare function scan(root?: HTMLElement): void;
  410. /**
  411. * Remove observed node
  412. */
  413. export declare function stopObserving(root: HTMLElement): void;
  414. export { }