From 9ed21a9e97010491bed2a424318272d5781170ba Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 18 Apr 2024 19:06:22 +0200 Subject: [PATCH 1/2] feat(vue): compatible with SSR --- components/vue/src/iconify.ts | 14 +++++++------- components/vue/src/props.ts | 7 ++++++- 2 files changed, 13 insertions(+), 8 deletions(-) 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..1f0c43f 100644 --- a/components/vue/src/props.ts +++ b/components/vue/src/props.ts @@ -67,4 +67,9 @@ 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 + */ + ssr?: boolean +} From 24b5d1b28ca0dc560fe0c5270b55c31d39c1e941 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 18 Apr 2024 19:51:01 +0200 Subject: [PATCH 2/2] docs: update note --- components/vue/src/props.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/vue/src/props.ts b/components/vue/src/props.ts index 1f0c43f..ce65442 100644 --- a/components/vue/src/props.ts +++ b/components/vue/src/props.ts @@ -70,6 +70,9 @@ interface IconifyElementProps { 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 }