diff --git a/components/vue/src/iconify.ts b/components/vue/src/iconify.ts index d3f7be2..ab3ce07 100644 --- a/components/vue/src/iconify.ts +++ b/components/vue/src/iconify.ts @@ -243,6 +243,12 @@ export const Icon = defineComponent({ // Set initial data data() { return { + // Current icon name + _name: '', + + // Loading + _loadingIcon: null, + // Mounted status iconMounted: false, @@ -252,12 +258,6 @@ export const Icon = defineComponent({ }, mounted() { - // Current icon name - this._name = ''; - - // Loading - this._loadingIcon = null; - // Mark as mounted this.iconMounted = true; }, @@ -354,7 +354,7 @@ export const Icon = defineComponent({ const props = this.$attrs; // Get icon data - const icon: IconComponentData | null = this.iconMounted + const icon: IconComponentData | null = (this.iconMounted || props.ssr) ? this.getIcon(props.icon, props.onLoad) : null; diff --git a/components/vue/src/props.ts b/components/vue/src/props.ts index 50fc4dd..ce65442 100644 --- a/components/vue/src/props.ts +++ b/components/vue/src/props.ts @@ -67,4 +67,12 @@ interface IconifyElementProps { /** * Mix of icon properties and HTMLElement properties */ -export type IconProps = IconifyElementProps & IconifyIconProps; +export interface IconProps extends IconifyElementProps, IconifyIconProps { + /** + * Try load icon on first render during SSR + * + * This is a low-level API for framework integrations, you don't usually need to use it directly. + * Note this might hydration mismatches if the icon data is not handled correctly, use with caution. + */ + ssr?: boolean +}