iconify.d.ts 10 KB

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