![]() ![]() What is the purpose of onLoad? To let you know when Icon component renders an icon and when it does not render anything. If value of icon property is a string and icon data is not available, onLoad is called on first re-render after icon data is retrieved from API.If value of icon property is a string and icon data is available, onLoad is called on first render.If value of icon property is an object, onLoad is not called.It is not an event, such as click event for links, it is a simple callback function. It is called when icon data has been loaded. OnLoad property is an optional callback function. These are not CSS transformations, transformations are applied inside SVG.įor more details see how to transform icon in Iconify for Vue. All transformations are done relative to the center of the icon. TransformationsĪn icon can be rotated and flipped horizontally and/or vertically. To add color to a monotone icon simply change text color.įor various ways to change icon dimensions, see how to change icon dimensions in Iconify for Vue. Some icons, such as emoji, have a hardcoded palette that cannot be changed. You can only change color of monotone icons. You can also add custom API providers for more icon choices. Browse icons sets to see all available icons. There are over 150,000 icons available from 100+ icon sets. For example, fa:arrow-left and fa-arrow-left are identical because " fa" does not contain hyphen. This is to support people migrating from icon fonts. If prefix does not contain " -", prefix and icon name can be separated with hyphen.If API provider is empty, it can be skipped (like in examples above).mdi-light:home - icon is " home" from Material Design Light icon set, from public Iconify API.flat-color-icons:voice-presentation - icon is " voice-presentation" from Flat Color Icons icon set, from public Iconify API.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. |