![]() ![]() Icon name is a string, which has 3 provider points to API source. All other properties and events will be passed to generated SVG element, so you can do stuff like setting the inline style, add title, add onClick event and so on. In addition to the properties mentioned above, the icon component accepts any other properties and events. See below for more information on each optional property. onLoad, function is a callback that is called when icon data has been loaded.flip, string alternative to horizontalFlip and verticalFlip.verticalFlip, boolean flips icon vertically.horizontalFlip, boolean flips icon horizontally.inline, boolean changes vertical alignment.icon, IconifyIcon | string icon name or icon data.You can pass any custom properties to component. ![]() Browsers already support Fetch API, so this code is not needed in browsers. This code must be added only to script that runs on server side, not bundled for client side use. Use internal setFetch() function to set third party Fetch API before using any icon component functions.Install cross-fetch (if you are using CommonJS) or node-fetch (if you are using modules) as dependency.How to support API in server side rendering? That means icon component cannot retrieve icon data from Iconify API when used on a server side in Node.js environment. It is available in Node.js version 17 using flag " -experimental-fetch", but without it Fetch API is not available. If you want to use icon component's functions that load icon data from API in Nuxt.js, you need Fetch API.Ĭurrently Node.js does not natively support Fetch API. If you do want to render SVGs on server side, use either offline bundle or provide icon data as parameter instead of icon name. For server side rendering it means HTML will not include SVGs, they will be dynamically added only when hydrating DOM on client side. Nuxt.jsĬomponent does not retrieve icon data until it is mounted. See icon bundles for Iconify for Vue documentation. If you do not want to use API, you need to provide icon component with data for all icons you are using. You can use individual icon packages, which is similar to icon bundles, but import icons one by one and are easier to use.You can build icon bundles for icons that are used in your application, making icon data available offline.What if you want to use component offline or on local network? Retrieving icon data from Iconify API requires visitor to be online. ![]()
0 Comments
Leave a Reply. |