chore(react): fix ssr attribute behavior

components-demo/nextjs-demo/pages/index.js

@@ -27,7 +27,7 @@ export default function Home() {
 			}
 		});
 		return unsubscribe;
-	});
+	}, []);
 
 	return (
 		<div className="container">
@@ -103,10 +103,11 @@ export default function Home() {
 						/>
 						<InlineIcon icon="flat-color-icons:home" />
 					</p>
-					<p>
+					<p className="ssr-test">
 						Icons to test unique ids:{' '}
-						<InlineIcon icon={iconDataWithID} />
-						<InlineIcon icon={iconDataWithID} />
+						<InlineIcon icon={iconDataWithID} ssr={true} />
+						<InlineIcon icon={iconDataWithID} ssr={true} />
+						followed by text
 					</p>
 					<p>
 						Testing 'carbon:home':
@@ -207,8 +208,14 @@ export default function Home() {
 					border-radius: 5px;
 					padding: 0.75rem;
 					font-size: 1.1rem;
-					font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-						DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
+					font-family:
+						Menlo,
+						Monaco,
+						Lucida Console,
+						Liberation Mono,
+						DejaVu Sans Mono,
+						Bitstream Vera Sans Mono,
+						Courier New,
 						monospace;
 				}
 
@@ -231,7 +238,9 @@ export default function Home() {
 					text-decoration: none;
 					border: 1px solid #eaeaea;
 					border-radius: 10px;
-					transition: color 0.15s ease, border-color 0.15s ease;
+					transition:
+						color 0.15s ease,
+						border-color 0.15s ease;
 				}
 
 				.card:hover,
@@ -288,14 +297,30 @@ export default function Home() {
 				body {
 					padding: 0;
 					margin: 0;
-					font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
-						Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-						Helvetica Neue, sans-serif;
+					font-family:
+						-apple-system,
+						BlinkMacSystemFont,
+						Segoe UI,
+						Roboto,
+						Oxygen,
+						Ubuntu,
+						Cantarell,
+						Fira Sans,
+						Droid Sans,
+						Helvetica Neue,
+						sans-serif;
 				}
 
 				* {
 					box-sizing: border-box;
 				}
+
+				.ssr-test span {
+					display: inline-block;
+					width: 1em;
+					height: 1em;
+					background: red;
+				}
 			`}</style>
 		</div>
 	);

components/react/package.json

@@ -3,7 +3,7 @@
 	"description": "Iconify icon component for React.",
 	"author": "Vjacheslav Trushkin",
 	"type": "module",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

components/react/src/iconify.ts

@@ -238,9 +238,32 @@ function IconComponent(props: InternalIconProps): JSX.Element {
 
 	const [mounted, setMounted] = useState(!!props.ssr);
 	const [abort, setAbort] = useState<AbortState>({});
-	const [state, setState] = useState<State>({
-		name: '',
-	});
+
+	// Get initial state
+	function getInitialState(mounted: boolean): State {
+		if (mounted) {
+			const name = props.icon;
+			if (typeof name === 'object') {
+				// Icon as object
+				return {
+					name: '',
+					data: name,
+				};
+			}
+
+			const data = getIconData(name);
+			if (data) {
+				return {
+					name,
+					data,
+				};
+			}
+		}
+		return {
+			name: '',
+		};
+	}
+	const [state, setState] = useState<State>(getInitialState(!!props.ssr));
 
 	// Cancel loading
 	function cleanup() {
@@ -251,13 +274,21 @@ function IconComponent(props: InternalIconProps): JSX.Element {
 		}
 	}
 
+	// Change state if it is different
+	function changeState(newState: State): boolean | undefined {
+		if (JSON.stringify(state) !== JSON.stringify(newState)) {
+			cleanup();
+			setState(newState);
+			return true;
+		}
+	}
+
 	// Update state
 	function updateState() {
 		const name = props.icon;
 		if (typeof name === 'object') {
 			// Icon as object
-			cleanup();
-			setState({
+			changeState({
 				name: '',
 				data: name,
 			});
@@ -266,12 +297,12 @@ function IconComponent(props: InternalIconProps): JSX.Element {
 
 		// New icon or got icon data
 		const data = getIconData(name);
-		if (state.name !== name || data !== state.data) {
-			cleanup();
-			setState({
+		if (
+			changeState({
 				name,
 				data,
-			});
+			})
+		) {
 			if (data === undefined) {
 				// Load icon, update state when done
 				const callback = loadIcons([name], updateState);