Как вы уже поняли, размеры иконок задаются в коде и не могут быть легко изменены так, как вы описываете. Если вы хотите сделать то, что вы предлагаете, я думаю, у вас есть несколько хороших вариантов:
Опция # 1 - Расширение VIcon
Вы можете создать свой собственный подкласс SF C to " "VIcon:
<template>
<v-icon
:size="sizes[size]"
>
{{ icon }}
</v-icon>
</template>
<script>
export default {
name: 'XIcon',
props: {
size: {
type: String,
default: 'medium',
},
// you'd need to re-implement any props
// here that you want to pass through to
// your component
},
data () {
// Create your own array of set sizes here
sizes: {
'x-small': '8px',
small: '10px',
default: '12px',
medium: '14px',
large: '16px',
'x-large': '18px',
},
},
}
</script>
Затем вы можете зарегистрировать его глобально в файле main.js:
// ...other normal imports...
import XIcon from '@/components/XIcon'
Vue.component('x-icon', XIcon)
new Vue({
//...
})
Затем вы можете использовать <x-icon size="x-large">...</x-icon>, и он будет использовать ваш подкласс. Недостатком является то, что вам придется заново реализовать все реквизиты VIcon в своем собственном компоненте.
Опция # 2 - «Глобальные» переменные размера, импортируемые везде
Вы можете настроить объект для определения ваших стандартных размеров в своем собственном файле, например:
// src/use/sizes.js
export const sizes = {
'x-small': '10px',
small: '12px',
// ...
}
Затем в ваших компонентах:
<template>
<div>
<v-icon
:size="sizes.small"
>
mdi-close
</v-icon>
</div>
</template>
<script>
import { sizes } from '@/use/sizes'
export default {
name: 'SomeComponent'
data: () => ({
sizes,
}),
}
</script>
Этот синтаксис отличается от простого произнесения <v-icon small>...</v-icon> но, по крайней мере, вам нужно установить значения только один раз, и вы можете очень легко изменить их в приложении. Он также совместим с тем, как Vuetify предназначен для использования, поэтому другие люди, сотрудничающие с вашим кодом, не будут иметь никаких проблем с его пониманием.
Вариант № 3 - Создайте свой собственный пакет VIcon
Я создал и опубликовал свой собственный npm пакет для реализации Stripe Elements , которые соответствуют виду и полю поля Vuetify. Я написал серию постов в блоге, чтобы объяснить процесс .
Это может быть довольно просто сделать, так как вы работаете только с одним компонентом (VIcon) и вы Вы меняете только очень маленькую его часть. Тем не менее, это кажется излишним просто для того, чтобы вы могли выполнить sh синтаксис, который вы хотите. Похоже, мой вид проекта. ;) В любом случае, если бы вы сделали это таким образом, вы могли бы просто убедиться, что ваш VIcon был зарегистрирован через Vuetify, и тогда вы выполнили бы sh то, что вы описали без изменения Vuetify вообще.
Надеюсь, это поможет!