Merge remote-tracking branch 'antfu/feat/vue-ssr' into next

components/vue/src/iconify.ts

@@ -243,6 +243,12 @@ export const Icon = defineComponent<IconProps>({
 	// Set initial data
 	data() {
 		return {
+			// Current icon name
+			_name: '',
+
+			// Loading
+			_loadingIcon: null,
+
 			// Mounted status
 			iconMounted: false,
 
@@ -252,12 +258,6 @@ export const Icon = defineComponent<IconProps>({
 	},
 
 	mounted() {
-		// Current icon name
-		this._name = '';
-
-		// Loading
-		this._loadingIcon = null;
-
 		// Mark as mounted
 		this.iconMounted = true;
 	},
@@ -354,7 +354,7 @@ export const Icon = defineComponent<IconProps>({
 		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;
 

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
+}