Rename inline mode to svg in components

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

@@ -29,7 +29,7 @@ export function Checkbox(props: CheckboxProps) {
 			>
 				<Icon
 					icon={checked ? checkedIcon : uncheckedIcon}
-					mode={checked ? 'mask' : 'inline'}
+					mode={checked ? 'mask' : 'svg'}
 				/>
 				{props.text}
 			</a>

demo/svelte-demo-vite/src/App.svelte

@@ -13,12 +13,12 @@
   <Counter />
 
   <p>
-    Visit <a href="https://svelte.dev">svelte.dev <Icon icon="ci:external-link" inline={true} /></a> to learn how to build <Icon icon="logos:svelte" inline={true} />
+    Visit <a href="https://svelte.dev">svelte.dev <Icon icon="ci:external-link" inline={true}  mode="style" /></a> to learn how to build <Icon icon="logos:svelte" inline={true} />
     apps.
   </p>
 
   <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <Icon icon="ci:external-link" inline={true} /></a> for
+    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <Icon icon="ci:external-link" inline={true} mode="style" /></a> for
     the officially supported framework, also powered by Vite!
   </p>
 </main>

demo/svelte-demo/public/global.css

@@ -48,22 +48,22 @@ p {
 .test-row-icons {
 	padding-right: 4px;
 }
-.test-row-icons > svg {
+.test-row-icons > :is(svg, span) {
 	color: #afafaf;
 	display: none;
 }
-.test-row-icons > svg.visible {
+.test-row-icons > :is(svg, span).visible {
 	display: inline-block;
 }
-.test-row-icons > svg.success {
+.test-row-icons > :is(svg, span).success {
 	color: #327335;
 }
-.test-row-icons > svg.failed {
+.test-row-icons > :is(svg, span).failed {
 	color: #ba3329;
 }
 
 /* 24px icon */
-.icon-24 svg {
+.icon-24 :is(svg, span) {
 	font-size: 24px;
 	line-height: 1;
 	vertical-align: -0.25em;
@@ -85,7 +85,7 @@ p {
 	clear: both;
 }
 
-.alert svg {
+.alert :is(svg, span) {
 	position: absolute;
 	left: 12px;
 	top: 50%;
@@ -110,17 +110,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 +130,7 @@ p {
 }
 
 /* Inline demo */
-.inline-demo svg {
+.inline-demo :is(svg, span) {
 	color: #06a;
 	margin: 0 8px;
 	position: relative;

demo/svelte-demo/src/demo-components/Checkbox.svelte

@@ -23,6 +23,6 @@
 </script>
 
 <div class="checkbox-container">
-    <a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} />{text}</a>
+    <a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} mode={checked ? 'svg' : 'style'} />{text}</a>
     <small>{hint}</small>
 </div>

demo/svelte-demo/src/demo-components/Inline.svelte

@@ -8,11 +8,15 @@
     <div>
         Block icon (behaving like image):
         <OfflineIcon icon="experiment2" />
+        <OfflineIcon icon="experiment2" mode="style" />
         <FullIcon icon="experiment2" />
+        <FullIcon icon="experiment2" mode="style" />
     </div>
     <div>
         Inline icon (behaving line text / icon font):
         <OfflineIcon icon="experiment2" inline={true} />
+        <OfflineIcon icon="experiment2" inline={true} mode="style" />
         <FullIcon icon="experiment2" inline={true} />
+        <FullIcon icon="experiment2" inline={true} mode="style" />
     </div>
 </section>

demo/svelte-demo/src/demo-components/UsageFull.svelte

@@ -7,13 +7,13 @@
 <section class="icon-24">
     <h1>Usage  (full module)</h1>
     <div>
-        Icon referenced by name: <Icon icon="mdi:home" />
+        Icon referenced by name (as svg, as span): <Icon icon="mdi:home" mode="svg" /><Icon icon="mdi:home" mode="style" />
     </div>
     <div class="alert">
         <Icon icon="mdi-light:alert" on:load={event => {
             console.log(event);
             onLoadCalled = true;
-        }} />
+        }} mode="style" />
         Important notice with alert icon{onLoadCalled ? '' : ' (loading...)'}!
     </div>
 </section>

demo/vue-demo/src/demo-components/Checkbox.vue

@@ -3,7 +3,7 @@
 		<span :class="className">
 			<Icon
 				:icon="icon"
-				:mode="isChecked ? 'inline' : 'style'"
+				:mode="isChecked ? 'svg' : 'style'"
 				@click="check"
 			/>{{ text }}
 		</span>

packages/iconify/src/scanner/config.ts

@@ -11,11 +11,11 @@ export const inlineClass = 'iconify-inline';
  * Icon render mode
  *
  * 'style' = 'bg' or 'mask', depending on icon content
- * 'bg' = inline style using `background`
+ * 'bg' = add inline style to placeholder using `background`
- * 'mask' = inline style using `mask`
+ * 'mask' = add inline style to placeholder using `mask`
- * 'inline' = inline SVG.
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 /**
  * Data used to verify if icon is the same

packages/react/src/props.ts

@@ -8,11 +8,11 @@ export { RawIconCustomisations };
  * Icon render mode
  *
  * 'style' = 'bg' or 'mask', depending on icon content
- * 'bg' = inline style using `background`
+ * 'bg' = <span> with style using `background`
- * 'mask' = inline style using `mask`
+ * 'mask' = <span> with style using `mask`
- * 'inline' = inline SVG.
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**

packages/react/src/render.ts

@@ -91,7 +91,7 @@ export const render = (
 	);
 
 	// Check mode
-	const mode: IconifyRenderMode = props.mode || 'inline';
+	const mode: IconifyRenderMode = props.mode || 'svg';
 
 	// Create style
 	const style: React.CSSProperties = {};
@@ -99,7 +99,7 @@ export const render = (
 
 	// Create SVG component properties
 	const componentProps = {
-		...(mode === 'inline' ? svgDefaults : {}),
+		...(mode === 'svg' ? svgDefaults : {}),
 		ref,
 	};
 
@@ -181,7 +181,7 @@ export const render = (
 		style.verticalAlign = '-0.125em';
 	}
 
-	if (mode === 'inline') {
+	if (mode === 'svg') {
 		// Add style
 		componentProps.style = {
 			...style,

packages/svelte/src/functions.ts

@@ -125,6 +125,7 @@ export { RawIconCustomisations, IconifyIconBuildResult };
 
 /* Browser cache */
 export { IconifyBrowserCacheType };
+
 /**
  * Enable cache
  */

packages/svelte/src/props.ts

@@ -7,11 +7,11 @@ export { RawIconCustomisations };
  * Icon render mode
  *
  * 'style' = 'bg' or 'mask', depending on icon content
- * 'bg' = inline style using `background`
+ * 'bg' = <span> with style using `background`
- * 'mask' = inline style using `mask`
+ * 'mask' = <span> with style using `mask`
- * 'inline' = inline SVG.
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**

packages/svelte/src/render.ts

@@ -86,10 +86,11 @@ export function render(
 	);
 
 	// Check mode
-	const mode: IconifyRenderMode = props.mode || 'inline';
+	const mode: IconifyRenderMode = props.mode || 'svg';
-	const componentProps = (
+	const componentProps = (mode === 'svg' ? { ...svgDefaults } : {}) as Record<
-		mode === 'inline' ? { ...svgDefaults } : {}
+		string,
-	) as Record<string, unknown>;
+		unknown
+	>;
 
 	// Create style if missing
 	let style = typeof props.style === 'string' ? props.style : '';
@@ -181,7 +182,7 @@ export function render(
 		style = 'vertical-align: -0.125em; ' + style;
 	}
 
-	if (mode === 'inline') {
+	if (mode === 'svg') {
 		// Add icon stuff
 		Object.assign(componentProps, renderAttribs);
 

packages/vue/src/props.ts

@@ -7,11 +7,11 @@ export { RawIconCustomisations };
  * Icon render mode
  *
  * 'style' = 'bg' or 'mask', depending on icon content
- * 'bg' = inline style using `background`
+ * 'bg' = <span> with style using `background`
- * 'mask' = inline style using `mask`
+ * 'mask' = <span> with style using `mask`
- * 'inline' = inline SVG.
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**

packages/vue/src/render.ts

@@ -111,7 +111,7 @@ export const render = (
 	const componentProps = { ...svgDefaults };
 
 	// Check mode
-	const mode: IconifyRenderMode = props.mode || 'inline';
+	const mode: IconifyRenderMode = props.mode || 'svg';
 
 	// Copy style
 	const style: VStyle = {};
@@ -213,7 +213,7 @@ export const render = (
 		style.verticalAlign = '-0.125em';
 	}
 
-	if (mode === 'inline') {
+	if (mode === 'svg') {
 		// Add style
 		componentProps.style = {
 			...style,