new icon

CHANGELOG.md

@@ -1,6 +1,10 @@
 Changelog
 =========
 
+## v9.2.4 *(2023-12-12)*
+- New icons (`print`).
+- Icon optimisations.
+
 ## v9.2.3 *(2023-11-10)*
 - Fix `InputTag`.
 

docs-src/components/icon/Icon.svelte

@@ -6,18 +6,25 @@
 			<div class="icon-block-name">{icon}</div>
 		</div>
 	{/each}
+	{#each Object.keys(customIcons) as icon}
+		<div class="icon-block" title="{icon}">
+			<div class="icon-block-icon"><Icon name="{icon}"/></div>
+			<div class="icon-block-name">{icon}</div>
+		</div>
+	{/each}
 </div>
 
 <h2>Custom Icon</h2>
 <Button icon="customIcon">Custom Icon Button</Button>
 
 <CodeExample html="{exampleHtml}" />
 <API props="{apiProps}"/>
-<API props="{addIconAPI}" title="addIcon function" description="A component exports a global <em>addIcon</em> function with the following arguments:"/>
+<API props="{addIconAPI}" title="addIcon function" description="The component exports a global <em>addIcon</em> function with the following arguments:"/>
+<API props="{getIconAPI}" title="getIcon function" description="The component exports a global <em>getIcon</em> function that can be used to retrieve the icon's svg code (as string). The function accepts the following argument:"/>
 
 
 <script>
-import { Icon, icons, addIcon, Button } from '../../../src';
+import { Icon, icons, customIcons, addIcon, Button } from '../../../src';
 import { API } from '../../api-table';
 import { CodeExample } from '../../code-example';
 
@@ -32,6 +39,10 @@ const addIconAPI = [
 	{ name: 'svg', type: 'string', description: 'SVG code.' },
 ];
 
+const getIconAPI = [
+	{ name: 'name', type: 'string', description: 'Name of the icon.' },
+];
+
 const exampleHtml = `
 <Icon name="alert"/>
 <Icon name="customIcon"/>

docs-src/pages/changelog.svelte

@@ -1,4 +1,9 @@
 <h1>Changelog</h1>
+<h2>v9.2.4 <em>(2023-12-12)</em></h2>
+<ul>
+<li>New icons (<code>print</code>).</li>
+<li>Icon optimisations.</li>
+</ul>
 <h2>v9.2.3 <em>(2023-11-10)</em></h2>
 <ul>
 <li>Fix <code>InputTag</code>.</li>

src/icon/Icon.svelte

@@ -1,22 +1,8 @@
 {@html svg}
 
 <script>
-import { icons } from './icons.js';
+import { getIcon } from './icons.js';
 export let name = '';
 
-const aliases = {
-	add: 'plus',
-	report: 'reportAnalytics',
-	success: 'checkCircle',
-	warning: 'alert',
-};
-
-$:svg = findIcon(name);
-
-/*eslint import/namespace: 0 */
-function findIcon (_name) {
-	if (_name in aliases) _name = aliases[_name];
-	if (_name in icons) return icons[_name];
-	return `<svg width="20" height="20" title="${_name}"></svg>`;
-}
+$:svg = getIcon(name);
 </script>