mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Ulf Gebhardt
4b3a26d517
* shout comments * fix notifications * Remove whitespace for empty category sections * Overhaul post actions * Adjust spacing * Allow fine-grained size control for icons and circle buttons via css variables; adjust comments layout * Adjust spacing * Add test for ActionButton (WIP) * Rename import * Remove text and add count bubble * Use filled icons to indicate active states * Adjust sizes and orientation * Remove unused properties, add test * Fix ObserveButton test * Fix ShoutButton test * fix tests * Adapt styles * Adjust style for larger numbers * Remove unused icon * Fix test structure * Remove unused class names --------- Co-authored-by: Maximilian Harz <maxharz@gmail.com>
68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<template>
|
||
<span v-if="svgIcon" class="base-icon">
|
||
<component :class="['svg', `--${size}`]" :is="svgIcon" aria-hidden="true" focusable="false" />
|
||
</span>
|
||
</template>
|
||
|
||
<script>
|
||
import icons, { iconNames } from '~/assets/_new/icons'
|
||
|
||
export default {
|
||
props: {
|
||
name: {
|
||
type: String,
|
||
required: true,
|
||
validator(value) {
|
||
return iconNames.includes(value)
|
||
},
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: 'regular',
|
||
validator(value) {
|
||
return value.match(/^(small|regular|large)$/)
|
||
},
|
||
},
|
||
},
|
||
computed: {
|
||
svgIcon() {
|
||
const icon = icons[this.name]
|
||
if (!icon) {
|
||
return false
|
||
}
|
||
/*
|
||
a Vue component needs a render function,
|
||
so we check if there is a render function directly on the icon –
|
||
otherwise we know it is wrapped in icon.default
|
||
*/
|
||
return icon.render ? icon : icon.default
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.base-icon {
|
||
display: inline-flex;
|
||
vertical-align: bottom;
|
||
|
||
> .svg {
|
||
height: 1.2em;
|
||
fill: currentColor;
|
||
|
||
&.--small {
|
||
height: 0.8em;
|
||
}
|
||
|
||
&.--regular {
|
||
height: var(--icon-size, 1.2em);
|
||
}
|
||
|
||
&.--large {
|
||
margin-left: 4px;
|
||
height: 2.2em;
|
||
}
|
||
}
|
||
}
|
||
</style>
|