benwis
How to Edit v-icon created by prepend-icon in v-list-item
I have a bunch of
And I'd like to change the size of the icon. Is there a way to do this?
<v-list-item
:prepend-icon="wave"
title="Hi"
value="Bob"
to="/hi"
>
<v-list-item
:prepend-icon="wave"
title="Hi"
value="Bob"
to="/hi"
>
4 replies
Argument of type '{}' is not assignable to parameter of type
At the risk of looking really foolish, why the heck is vue-tsc saying it can't assign a literal number to this? There's a component right above it that appears to do the same thing and it doesn't complain about that one
<PanelsNetworkStatsListPanel
:foobar="1"
vertical
class="flex-grow-1"
/>
<PanelsNetworkStatsListPanel
:foobar="1"
vertical
class="flex-grow-1"
/>
<template>
<div class="d-flex flex-wrap ga-3 justify-space-between">
<ContainmentPanel
v-for="panel in panelList"
:key="panel.label"
class="score flex-grow-1"
>
<template #panel-body>
<div class="d-flex align-center ga-2">
<CustomSvg
:filename="panel.icon"
:class="{ 'flip-180': panel.reverseIcon }"
/>
<div class="d-flex flex-column ga-2">
<div class="ga-3 align-end">
<p class="score-heading font-weight-light">{{ panel.stat }}</p>
<p class="text-caption">{{ panel.unitOfMeasurement }}</p>
</div>
<p class="text-body font-weight-bold text-capitalize">
{{ panel.label }}
</p>
</div>
</div>
</template>
</ContainmentPanel>
</div>
</template>
<script setup lang="ts">
const panelList = ref([
{
stat: "400,000",
unitOfMeasurement: "bytes per day",
label: "Total Communication",
icon: "compare_arrows",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
label: "Outbound Communication",
icon: "bubble",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
icon: "bubble",
reverseIcon: true,
label: "Inbound Communication",
},
])
const props = defineProps({
foobar: {
type: Number,
required: true,
},
})
</script>
<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>
<template>
<div class="d-flex flex-wrap ga-3 justify-space-between">
<ContainmentPanel
v-for="panel in panelList"
:key="panel.label"
class="score flex-grow-1"
>
<template #panel-body>
<div class="d-flex align-center ga-2">
<CustomSvg
:filename="panel.icon"
:class="{ 'flip-180': panel.reverseIcon }"
/>
<div class="d-flex flex-column ga-2">
<div class="ga-3 align-end">
<p class="score-heading font-weight-light">{{ panel.stat }}</p>
<p class="text-caption">{{ panel.unitOfMeasurement }}</p>
</div>
<p class="text-body font-weight-bold text-capitalize">
{{ panel.label }}
</p>
</div>
</div>
</template>
</ContainmentPanel>
</div>
</template>
<script setup lang="ts">
const panelList = ref([
{
stat: "400,000",
unitOfMeasurement: "bytes per day",
label: "Total Communication",
icon: "compare_arrows",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
label: "Outbound Communication",
icon: "bubble",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
icon: "bubble",
reverseIcon: true,
label: "Inbound Communication",
},
])
const props = defineProps({
foobar: {
type: Number,
required: true,
},
})
</script>
<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>
[vue-tsc] Argument of type '{}' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never> & Record<...>'. Property 'foobar' is missing in type '{}' but required in type 'Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{ foobar: { type: NumberConstructor; required: true; }; }>>, never>'.
[vue-tsc] Argument of type '{}' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never> & Record<...>'. Property 'foobar' is missing in type '{}' but required in type 'Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{ foobar: { type: NumberConstructor; required: true; }; }>>, never>'.
7 replies