fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-29 18:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move all icon SVG imports to the Icon component

Browse Source 
This change also removes the need to specify the icon size.
This commit is contained in:
Keavon Chambers
2021-05-27 02:14:32 -07:00
parent 313a1dfc65
commit c205fec0d4
11 changed files with 254 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/buttons/IconButton.vue
+22 -32
View File
@@ -1,12 +1,14 @@
<template>
<button class="icon-button" :class="`size-${String(size)} icon-size-${String(iconSize)}`">
<slot></slot>
<button class="icon-button" :class="`size-${String(size)}`">
<Icon :icon="icon" />
</button>
</template>
<style lang="scss">
.icon-button {
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
padding: 0;
outline: none;
@@ -27,50 +29,38 @@
fill: var(--color-f-white);
}
&.icon-size-12 {
svg {
width: 12px;
height: 12px;
}
&.size-16 {
padding: (16px - 12px) / 2;
}
&.size-24 {
padding: (24px - 12px) / 2;
}
&.size-32 {
padding: (32px - 12px) / 2;
}
&.size-12 {
width: 12px;
height: 12px;
}
&.icon-size-16 {
svg {
width: 16px;
height: 16px;
}
&.size-16 {
width: 16px;
height: 16px;
}
&.size-24 {
padding: (24px - 16px) / 2;
}
&.size-24 {
width: 24px;
height: 24px;
}
&.size-32 {
padding: (32px - 16px) / 2;
}
&.size-32 {
width: 32px;
height: 32px;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "../labels/Icon.vue";
export default defineComponent({
props: {
icon: { type: String, required: true },
size: { type: Number, required: true },
iconSize: { type: Number, required: true },
gapAfter: { type: Boolean, default: false },
},
components: { Icon },
});
</script>