react demo: test different render modes

demo/react-demo/src/App.css

@@ -48,22 +48,27 @@ p {
 .test-row-icons {
 	padding-right: 4px;
 }
-.test-row-icons > svg {
+.test-row-icons > svg,
+.test-row-icons > span {
 	color: #afafaf;
 	display: none;
 }
-.test-row-icons > svg.visible {
+.test-row-icons > .hidden {
+	display: none !important;
+}
+.test-row-icons > .visible {
 	display: inline-block;
 }
-.test-row-icons > svg.success {
+.test-row-icons > .success {
 	color: #327335;
 }
-.test-row-icons > svg.failed {
+.test-row-icons > .failed {
 	color: #ba3329;
 }
 
 /* 24px icon */
-.icon-24 svg {
+.icon-24 svg,
+.icon-24 span {
 	font-size: 24px;
 	line-height: 1;
 	vertical-align: -0.25em;
@@ -85,7 +90,7 @@ p {
 	clear: both;
 }
 
-.alert svg {
+.alert :is(svg, span) {
 	position: absolute;
 	left: 12px;
 	top: 50%;
@@ -110,17 +115,17 @@ p {
 	text-decoration: underline;
 }
 
-.checkbox svg {
+.checkbox :is(svg, span) {
 	margin-right: 4px;
 	color: #afafaf;
 	font-size: 24px;
 	line-height: 1em;
 	vertical-align: -0.25em;
 }
-.checkbox--checked svg {
+.checkbox--checked :is(svg, span) {
 	color: #327335;
 }
-.checkbox:hover svg {
+.checkbox:hover :is(svg, span) {
 	color: inherit;
 }
 
@@ -130,7 +135,7 @@ p {
 }
 
 /* Inline demo */
-.inline-demo svg {
+.inline-demo :is(svg, span) {
 	color: #06a;
 	margin: 0 8px;
 	position: relative;

demo/react-demo/src/demo-components/Checkbox.tsx

@@ -12,6 +12,11 @@ interface CheckboxProps {
 export function Checkbox(props: CheckboxProps) {
 	const [checked, setChecked] = useState(props.checked);
 
+	function onClick(event: React.MouseEvent<HTMLElement>) {
+		event.preventDefault();
+		setChecked((value) => !value);
+	}
+
 	return (
 		<div className="checkbox-container">
 			<a
@@ -20,9 +25,12 @@ export function Checkbox(props: CheckboxProps) {
 					'checkbox ' +
 					(checked ? 'checkbox--checked' : 'checkbox--unchecked')
 				}
-				onClick={() => setChecked((value) => !value)}
+				onClick={onClick}
 			>
-				<Icon icon={checked ? checkedIcon : uncheckedIcon} />
+				<Icon
+					icon={checked ? checkedIcon : uncheckedIcon}
+					mode={checked ? 'mask' : 'inline'}
+				/>
 				{props.text}
 			</a>
 			<small>{props.hint}</small>

demo/react-demo/src/demo-components/Inline.tsx

@@ -20,11 +20,13 @@ export function InlineDemo() {
 					id="inline-demo-inline-offline"
 					icon="experiment2"
 					inline={true}
+					mode="style"
 				/>
 				<FullIcon
 					id="inline-demo-inline-full"
 					icon="experiment2"
 					inline={true}
+					mode="style"
 				/>
 			</div>
 		</section>

demo/react-demo/src/demo-components/UsageFull.tsx

@@ -6,7 +6,8 @@ export function FullUsageDemo() {
 		<section className="icon-24">
 			<h1>Usage (full module)</h1>
 			<div>
-				Icon referenced by name: <Icon icon="mdi:home" />
+				Icons referenced by name (as SVG, as SPAN):{' '}
+				<Icon icon="mdi:home" /> <Icon icon="mdi:home" mode="style" />
 			</div>
 			<div className="alert">
 				<Icon icon="mdi-light:alert" />

demo/react-demo/src/demo-components/UsageFullOffline.tsx

@@ -8,17 +8,20 @@ export function FullOfflineUsageDemo() {
 		<section className="icon-24">
 			<h1>Usage (full module, offline mode)</h1>
 			<div>
-				Icon referenced by name: <Icon icon="demo" />
+				Icons referenced by name (as SVG, as SPAN): <Icon icon="demo" />
+				<Icon icon="demo" mode="style" />
 			</div>
 			<div>
-				Icon referenced by object: <Icon icon={accountIcon} />
+				Icons referenced by object (as SVG, as SPAN):{' '}
+				<Icon icon={accountIcon} />
+				<Icon icon={accountIcon} mode="style" />
 			</div>
 			<div>
 				2 icons imported from icon set: <Icon icon="alert1" />
-				<Icon icon="link1" />
+				<Icon icon="link1" mode="style" />
 			</div>
 			<div className="alert">
-				<Icon icon={alertIcon} />
+				<Icon icon={alertIcon} mode="mask" />
 				Important notice with alert icon!
 			</div>
 		</section>

demo/react-demo/src/demo-components/UsageOffline.tsx

@@ -8,15 +8,18 @@ export function OfflineUsageDemo() {
 		<section className="icon-24">
 			<h1>Usage (offline module)</h1>
 			<div>
-				Icon referenced by name: <Icon icon="demo" />
+				Icons referenced by name (as SVG, as SPAN): <Icon icon="demo" />
+				<Icon icon="demo" mode="style" />
 			</div>
 			<div>
-				Icon referenced by object: <Icon icon={accountIcon} />
+				Icons referenced by object (as SVG, as SPAN):{' '}
+				<Icon icon={accountIcon} />{' '}
+				<Icon icon={accountIcon} mode="style" />
 			</div>
 			<div>
 				2 icons imported from icon set:{' '}
 				<Icon icon="offline-mdi-light:account-alert" />
-				<Icon icon="offline-mdi-light:link" />
+				<Icon icon="offline-mdi-light:link" mode="style" />
 			</div>
 			<div className="alert">
 				<Icon icon={alertIcon} />

demo/react-demo/src/test-components/TestIcons.tsx

@@ -19,18 +19,21 @@ export function TestIcons(props: TestIconsProps) {
 		<span className="test-row-icons" id={id}>
 			<InlineIcon
 				icon={successIcon}
+				mode="style"
 				className={
 					'success ' + (icon === 'success' ? 'visible' : 'hidden')
 				}
 			/>
 			<InlineIcon
 				icon={pendingIcon}
+				mode="style"
 				className={
 					'pending ' + (icon === 'pending' ? 'visible' : 'hidden')
 				}
 			/>
 			<InlineIcon
 				icon={failedIcon}
+				mode="style"
 				className={
 					'failed ' + (icon === 'failed' ? 'visible' : 'hidden')
 				}

demo/react-demo/src/test-components/TestsFull.tsx

@@ -208,12 +208,13 @@ export function TestsFull() {
 
 			<div className="test-row">
 				<TestIcons id="full-color3" />
-				Green color from attribute (overrides style) + red from style:{' '}
+				Red color from attribute + green from style (style overrides
+				attribute):{' '}
 				<InlineIcon
 					icon={icon}
-					color="green"
+					color="red"
 					style={{
-						color: 'red',
+						color: 'green',
 					}}
 					ref={(element) => {
 						const key = 'full-color3';

demo/react-demo/src/test-components/TestsFullOffline.tsx

@@ -176,12 +176,13 @@ export function TestsFullOffline() {
 
 			<div className="test-row">
 				<TestIcons id="full-offline-color3" />
-				Green color from attribute (overrides style) + red from style:{' '}
+				Red color from attribute + green from style (style overrides
+				attribute):{' '}
 				<InlineIcon
 					icon="demo"
-					color="green"
+					color="red"
 					style={{
-						color: 'red',
+						color: 'green',
 					}}
 					ref={(element) => {
 						const key = 'full-offline-color3';

demo/react-demo/src/test-components/TestsOffline.tsx

@@ -176,12 +176,13 @@ export function TestsOffline() {
 
 			<div className="test-row">
 				<TestIcons id="offline-color3" />
-				Green color from attribute (overrides style) + red from style:{' '}
+				Red color from attribute + green from style (style overrides
+				attribute):{' '}
 				<InlineIcon
 					icon="demo"
-					color="green"
+					color="red"
 					style={{
-						color: 'red',
+						color: 'green',
 					}}
 					ref={(element) => {
 						const key = 'offline-color3';