chore: 🤖 add size option to icon component

addons/rose/addon/styles/rose/_icon.scss

@@ -1,9 +1,19 @@
 @use 'variables/sizing';
 
 .rose-icon {
+  --size: #{sizing.rems(l)};
+
+  &.medium {
+    --size: #{sizing.rems(m)};
+  }
+
+  &.small {
+    --size: #{sizing.rems(s)};
+  }
+
   > svg {
-    width: sizing.rems(l);
-    height: sizing.rems(l);
-    vertical-align: top;
+    width: var(--size);
+    height: var(--size);
+    vertical-align: middle;
   }
 }

addons/rose/addon/templates/components/rose/icon.hbs

@@ -1,3 +1,3 @@
-<span class="rose-icon">
+<span class="rose-icon {{@size}}">
   {{inline-svg @name}}
 </span>

addons/rose/app/templates/index.hbs

@@ -2,6 +2,8 @@ Dummy app index template
 
 <h2>Icon</h2>
 <Rose::Icon @name="alert-circle-fill" />
+<Rose::Icon @name="alert-circle-fill" @size="medium" />
+<Rose::Icon @name="alert-circle-fill" @size="small" />
 
 <h2>Button</h2>
 <Rose::Button @style="primary">Primary</Rose::Button>

addons/rose/stories/icon.stories.js

@@ -7,7 +7,7 @@ export default {
 
 export const Normal = () => ({
   template: hbs`
-    <Rose::Icon @name={{name}} />
+    <Rose::Icon @name={{name}} @size={{size}} />
 
     <br>
 
@@ -25,5 +25,15 @@ export const Normal = () => ({
       },
       'check-circle-outline'
     ),
+
+    size: select(
+      'size',
+      {
+        'large (24px / default)': 'large',
+        'medium (16px)': 'medium',
+        'small (12px)': 'small',
+      },
+      'large'
+    ),
   },
 });

addons/rose/tests/integration/components/rose/icon-test.js

@@ -10,4 +10,9 @@ module('Integration | Component | rose/icon', function (hooks) {
     await render(hbs`<Rose::Icon @name="unfold-more" />`);
     assert.ok(find('svg'));
   });
+
+  test('it supports optional @size', async function (assert) {
+    await render(hbs`<Rose::Icon @name="unfold-more" @size="small" />`);
+    assert.ok(find('.small'));
+  });
 });