@icij/murmur-next 4.7.4 → 4.7.5

package/lib/components/App/AppIcon.vue

@@ -97,8 +97,12 @@ const color = computed(() => {
   return colorVariant
 })
 
+const isPercentSize = computed(() => {
+  return typeof props.size === 'string' && props.size.endsWith('%')
+})
+
 const isRawSize = computed(() => {
-  return !['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', undefined].includes(props.size)
+  return !['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', undefined].includes(props.size) && !isPercentSize.value
 })
 
 const hasSize = computed(() => {
@@ -109,6 +113,7 @@ const style = computed(() => {
   return {
     '--app-icon-color': color.value,
     '--app-icon-raw-size': isRawSize.value ? props.size : undefined,
+    '--app-icon-percent-size': isPercentSize.value ? props.size : undefined,
     '--app-icon-size': hasSize.value ? props.size : undefined,
     '--app-icon-scale': props.scale ?? 1,
     '--app-icon-spin-duration': props.spinDuration,
@@ -122,6 +127,7 @@ const classList = computed(() => {
     [`app-icon--size-${props.size}`]: hasSize.value,
     [`app-icon--has-size`]: hasSize.value,
     [`app-icon--raw-size`]: isRawSize.value,
+    [`app-icon--percent-size`]: isPercentSize.value,
     [`app-icon--hover`]: currentHover.value,
     [`app-icon--spin`]: props.spin,
     [`app-icon--spin-reverse`]: props.spinReverse,
@@ -171,6 +177,16 @@ const classList = computed(() => {
     font-size: var(--app-icon-raw-size);
   }
 
+  &--percent-size {
+    width: var(--app-icon-percent-size);
+    height: auto;
+
+    :deep(svg) {
+      width: 100%;
+      height: auto;
+    }
+  }
+
   &--spin :deep(svg) {
     animation: app-icon-spin var(--app-icon-spin-duration, 1s) linear infinite;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.7.4",
+  "version": "4.7.5",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",