From f4efa1853d6407d61d12a63dd293cef37d0fe8f0 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Sat, 30 Apr 2022 18:23:38 +0300
Subject: [PATCH] Rename inline mode to svg in components

---
 .../src/demo-components/Checkbox.tsx          |  2 +-
 demo/svelte-demo-vite/src/App.svelte          |  4 ++--
 demo/svelte-demo/public/global.css            | 20 +++++++++----------
 .../src/demo-components/Checkbox.svelte       |  2 +-
 .../src/demo-components/Inline.svelte         |  4 ++++
 .../src/demo-components/UsageFull.svelte      |  4 ++--
 .../vue-demo/src/demo-components/Checkbox.vue |  2 +-
 packages/iconify/src/scanner/config.ts        |  8 ++++----
 packages/react/src/props.ts                   |  8 ++++----
 packages/react/src/render.ts                  |  6 +++---
 packages/svelte/src/functions.ts              |  1 +
 packages/svelte/src/props.ts                  |  8 ++++----
 packages/svelte/src/render.ts                 | 11 +++++-----
 packages/vue/src/props.ts                     |  8 ++++----
 packages/vue/src/render.ts                    |  4 ++--
 15 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/demo/react-demo/src/demo-components/Checkbox.tsx b/demo/react-demo/src/demo-components/Checkbox.tsx
index adba336..d480f8b 100644
--- a/demo/react-demo/src/demo-components/Checkbox.tsx
+++ b/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>
diff --git a/demo/svelte-demo-vite/src/App.svelte b/demo/svelte-demo-vite/src/App.svelte
index c78ea2c..5f39f4a 100644
--- a/demo/svelte-demo-vite/src/App.svelte
+++ b/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>
diff --git a/demo/svelte-demo/public/global.css b/demo/svelte-demo/public/global.css
index 718c03d..c394e4f 100644
--- a/demo/svelte-demo/public/global.css
+++ b/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;
diff --git a/demo/svelte-demo/src/demo-components/Checkbox.svelte b/demo/svelte-demo/src/demo-components/Checkbox.svelte
index 6a104a2..1e52dd9 100644
--- a/demo/svelte-demo/src/demo-components/Checkbox.svelte
+++ b/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>
\ No newline at end of file
diff --git a/demo/svelte-demo/src/demo-components/Inline.svelte b/demo/svelte-demo/src/demo-components/Inline.svelte
index 1e94668..7cde48f 100644
--- a/demo/svelte-demo/src/demo-components/Inline.svelte
+++ b/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>
\ No newline at end of file
diff --git a/demo/svelte-demo/src/demo-components/UsageFull.svelte b/demo/svelte-demo/src/demo-components/UsageFull.svelte
index f5c3b8d..50eb0ed 100644
--- a/demo/svelte-demo/src/demo-components/UsageFull.svelte
+++ b/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>
\ No newline at end of file
diff --git a/demo/vue-demo/src/demo-components/Checkbox.vue b/demo/vue-demo/src/demo-components/Checkbox.vue
index 1dbdae8..d6800f4 100644
--- a/demo/vue-demo/src/demo-components/Checkbox.vue
+++ b/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>
diff --git a/packages/iconify/src/scanner/config.ts b/packages/iconify/src/scanner/config.ts
index 7c71ebf..79069a0 100644
--- a/packages/iconify/src/scanner/config.ts
+++ b/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`
- * 'mask' = inline style using `mask`
- * 'inline' = inline SVG.
+ * 'bg' = add inline style to placeholder using `background`
+ * 'mask' = add inline style to placeholder using `mask`
+ * '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
diff --git a/packages/react/src/props.ts b/packages/react/src/props.ts
index 2e29002..e4818ef 100644
--- a/packages/react/src/props.ts
+++ b/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`
- * 'mask' = inline style using `mask`
- * 'inline' = inline SVG.
+ * 'bg' = <span> with style using `background`
+ * 'mask' = <span> with style using `mask`
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**
diff --git a/packages/react/src/render.ts b/packages/react/src/render.ts
index cd24a81..f54c818 100644
--- a/packages/react/src/render.ts
+++ b/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,
diff --git a/packages/svelte/src/functions.ts b/packages/svelte/src/functions.ts
index a02c6c9..dab871d 100644
--- a/packages/svelte/src/functions.ts
+++ b/packages/svelte/src/functions.ts
@@ -125,6 +125,7 @@ export { RawIconCustomisations, IconifyIconBuildResult };
 
 /* Browser cache */
 export { IconifyBrowserCacheType };
+
 /**
  * Enable cache
  */
diff --git a/packages/svelte/src/props.ts b/packages/svelte/src/props.ts
index f64fe2b..68b4879 100644
--- a/packages/svelte/src/props.ts
+++ b/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`
- * 'mask' = inline style using `mask`
- * 'inline' = inline SVG.
+ * 'bg' = <span> with style using `background`
+ * 'mask' = <span> with style using `mask`
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**
diff --git a/packages/svelte/src/render.ts b/packages/svelte/src/render.ts
index 62d5e9f..199067b 100644
--- a/packages/svelte/src/render.ts
+++ b/packages/svelte/src/render.ts
@@ -86,10 +86,11 @@ export function render(
 	);
 
 	// Check mode
-	const mode: IconifyRenderMode = props.mode || 'inline';
-	const componentProps = (
-		mode === 'inline' ? { ...svgDefaults } : {}
-	) as Record<string, unknown>;
+	const mode: IconifyRenderMode = props.mode || 'svg';
+	const componentProps = (mode === 'svg' ? { ...svgDefaults } : {}) as Record<
+		string,
+		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);
 
diff --git a/packages/vue/src/props.ts b/packages/vue/src/props.ts
index cdfb92e..459700c 100644
--- a/packages/vue/src/props.ts
+++ b/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`
- * 'mask' = inline style using `mask`
- * 'inline' = inline SVG.
+ * 'bg' = <span> with style using `background`
+ * 'mask' = <span> with style using `mask`
+ * 'svg' = <svg>
  */
-export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
+export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
 
 // Allow rotation to be string
 /**
diff --git a/packages/vue/src/render.ts b/packages/vue/src/render.ts
index 31dae4f..d093fe2 100644
--- a/packages/vue/src/render.ts
+++ b/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,