fix: size values with rem units are invalid in Safari

fix #13
fengyuanchen · Oct 23, 2021 · 65cdf4a · 65cdf4a
1 parent 9d4c396
commit 65cdf4a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/src/vue-feather.vue b/src/vue-feather.vue
@@ -4,6 +4,7 @@ import * as feather from 'feather-icons';
 
 export default defineComponent({
   name: 'VueFeather',
+
   props: {
     animation: {
       type: String,
@@ -66,10 +67,18 @@ export default defineComponent({
       },
     },
   },
+
+  computed: {
+    isRemSize(): boolean {
+      return typeof this.size === 'string' && this.size.endsWith('rem');
+    },
+  },
+
   render() {
     const {
       animation,
       animationSpeed,
+      isRemSize,
       size,
       type,
     } = this;
@@ -84,27 +93,34 @@ export default defineComponent({
         'data-name': type,
         'data-tags': icon.tags,
         'data-type': type,
+
         class: {
           'vue-feather': true,
           [`vue-feather--${type}`]: type,
           [`vue-feather--${animation}`]: animation,
           [`vue-feather--${animationSpeed}`]: animationSpeed,
         },
+
+        style: isRemSize ? {
+          height: size,
+          width: size,
+        } : undefined,
       },
 
       [
         h(
           'svg',
 
+          // XXX: The `width` and `height` attributes do not support the `rem` unit in Safari (#13).
           {
             ...icon.attrs,
             fill: this.fill,
-            height: size,
+            height: isRemSize ? undefined : size,
             stroke: this.stroke,
             'stroke-linecap': this.strokeLinecap,
             'stroke-linejoin': this.strokeLinejoin,
             'stroke-width': this.strokeWidth,
-            width: size,
+            width: isRemSize ? undefined : size,
             class: [icon.attrs.class, 'vue-feather__content'],
             innerHTML: icon.contents,
           },

diff --git a/tests/props.spec.ts b/tests/props.spec.ts
@@ -78,16 +78,43 @@ describe('props', () => {
     expect(wrapper.find('svg').attributes('fill')).toBe('red');
   });
 
-  it('size', () => {
-    const wrapper = mount(VueFeather, {
-      props: {
-        size: '2rem',
-      },
+  describe('size', () => {
+    it('number', () => {
+      const wrapper = mount(VueFeather, {
+        props: {
+          size: 32,
+        },
+      });
+
+      expect(wrapper.props('size')).toBe(32);
+      expect(wrapper.find('svg').attributes('width')).toBe('32');
+      expect(wrapper.find('svg').attributes('height')).toBe('32');
     });
 
-    expect(wrapper.props('size')).toBe('2rem');
-    expect(wrapper.find('svg').attributes('width')).toBe('2rem');
-    expect(wrapper.find('svg').attributes('height')).toBe('2rem');
+    it('string', () => {
+      const wrapper = mount(VueFeather, {
+        props: {
+          size: '2em',
+        },
+      });
+
+      expect(wrapper.props('size')).toBe('2em');
+      expect(wrapper.find('svg').attributes('width')).toBe('2em');
+      expect(wrapper.find('svg').attributes('height')).toBe('2em');
+    });
+
+    it('string:rem', () => {
+      const wrapper = mount(VueFeather, {
+        props: {
+          size: '2rem',
+        },
+      });
+
+      expect(wrapper.props('size')).toBe('2rem');
+      expect(wrapper.attributes('style')).toContain('2rem');
+      expect(wrapper.find('svg').attributes('width')).toBeUndefined;
+      expect(wrapper.find('svg').attributes('height')).toBeUndefined;
+    });
   });
 
   it('stroke', () => {