Skip to content

Commit

Permalink
Fix Width and Height that wasn't working and add some extra props
Browse files Browse the repository at this point in the history
Width and Height props weren't working at all. The width was fixed. 
Also added a size prop to configure both. Also, proving only with works anyway. 
Finally, added preserveAspectRatio prop, to configure that parameter on the SVG.

Uses Vue's CSS v-bind to pass the variables to the CSS.
  • Loading branch information
nachodd committed Mar 21, 2024
1 parent 4d882ec commit 3b7fc66
Showing 1 changed file with 26 additions and 11 deletions.
37 changes: 26 additions & 11 deletions src/runtime/components/MdiIcon.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<svg
viewbox="0 0 24 24"
:style="styles"
viewBox="0 0 24 24"
:width="size.width"
:height="size.height"
:preserveAspectRatio="preserveAspectRatio"
>
<path :d="path" />
</svg>
Expand All @@ -15,27 +17,40 @@ import { MdiIconString } from './MdiIcon'
export interface MdiIconProps {
width?: string,
height?: string,
size?: string,
flipX?: boolean,
flipY?: boolean,
icon: MdiIconString,
preserveAspectRatio?: string,
}
const props = withDefaults(defineProps<MdiIconProps>(), {
width: '1em',
height: '1em',
width: '24',
height: 'auto',
size: '',
flipX: false,
flipY: false,
preserveAspectRatio: 'none'
})
const path: Ref<string> = ref('')
// Dynamically set css variables for flipping the icon.
const styles: ComputedRef<any> = computed(() => ({
'--flip-x': props.flipX ? '-1' : '1',
'--flip-y': props.flipY ? '-1' : '1',
'width': '1em',
'height': 'auto',
const flip: ComputedRef<any> = computed(() => ({
x: props.flipX ? '-1' : '1',
y: props.flipY ? '-1' : '1',
}))
const size: ComputedRef<any> = computed(() => {
if (props.size !== "") {
return {
width: props.size,
height: props.size
}
}
return {
width: props.width,
height: props.height === "auto" ? props.width : props.height,
}
})
// Update the path with the corresponding SVG data from @mdi/js.
async function updateIcon() {
Expand All @@ -51,7 +66,7 @@ await updateIcon()

<style scoped>
svg {
transform: scaleX(var(--flip-x, 1)) scaleY(var(--flip-y, 1));
transform: scaleX(v-bind(flip.x)) scaleY(v-bind(flip.y));
}
path {
Expand Down

0 comments on commit 3b7fc66

Please sign in to comment.