feat: add support to remove size

README.md

@@ -1,19 +1,23 @@
 Edge Iconify
+
 > Iconify integration for Edge template engine
 
 ![](./edge_iconify.png)
 
 [Iconify](https://icon-sets.iconify.design/) is a great collection of over 100 oepn source icon sets. This package allows you to use all the available icons within edge templates.
 
 ## Not using the online mode
+
 Iconify support various icon loading strategies and the most prominent one on their website is the online API. During the online API, the Iconify will make an HTTP call to their API server and returns the icon data in response.
 
 The online API is not really useful on the backend, since bundle size is not really an issue on the server. Also, many companies restricts the outgoing traffic on their production servers and therefore the requests to Iconify API server will fail.
 
 ## Using icon bundles
+
 Icon bundles on the other hand are pre-bundled icon sets in JSON files. Iconify has an npm package for every single icon set they support and therefore using them is quite easy.
 
 ## Setup
+
 The first step is to install the `edge-iconify` package from the npm registry.
 
 ```sh
@@ -32,6 +36,7 @@ View.use(edgeIconify)
 That's all you need to do and you are ready to render SVG icons within your edge templates.
 
 ## Setup icon bundles
+
 Before you can render icons, you will have to install the icon set you are planning to use. You can also use multiple icon sets in a single projects.
 
 For this example, we will setup the following two icon sets.
@@ -56,6 +61,7 @@ addCollection(tablerIcons)
 ```
 
 ## Rendering icons
+
 Once, you have installed the icon bundles of your choice. You can render the icons as follows.
 
 ```edge

src/generate_svg.ts

@@ -19,8 +19,19 @@ export function generateSvg(name: string, props?: IconifyIconCustomisations & Re
     throw new Error(`Cannot locate icon "${name}". Make sure you have registered the icon bundle`)
   }
 
-  const { rotate, hFlip, vFlip, width, height, hAlign, vAlign, inline, slice, ...attributes } =
-    props || {}
+  const {
+    rotate,
+    hFlip,
+    vFlip,
+    width,
+    height,
+    hAlign,
+    vAlign,
+    inline,
+    slice,
+    size,
+    ...attributes
+  } = props || {}
 
   const svg = buildIcon(icon, {
     rotate,
@@ -34,5 +45,10 @@ export function generateSvg(name: string, props?: IconifyIconCustomisations & Re
     height,
   })
 
+  if (size && size === 'none') {
+    svg.attributes.width = false as any
+    svg.attributes.height = false as any
+  }
+
   return `<svg${stringifyAttributes({ ...svg.attributes, ...attributes })}>${svg.body}</svg>`
 }

tests/generate_svg.spec.ts

@@ -70,4 +70,11 @@ test.group('generateSvg', () => {
       `<svg width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="w-4 h-4">${icons.icons.home.body}</svg>`
     )
   })
+
+  test('do not set width and height when size is set to none', ({ assert }) => {
+    assert.equal(
+      generateSvg('mdi:home', { size: 'none', class: 'w-4 h-4' }),
+      `<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="w-4 h-4">${icons.icons.home.body}</svg>`
+    )
+  })
 })