Размер значка Vuetify

Размер значка Vuetify

05.01.2018 09:09:14 Просмотров 57 Источник

недавно я работал над приложением, использующим Vuetify, и у меня возникли проблемы с изменением цветов Vuetify по умолчанию. Так что я, наконец, закончил с этим:

https://github.com/vuetifyjs/vuetify/issues/299

Который, как его говорит, я добавил следующий код:

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

В Приложении.вю

Поэтому, когда я тестировал изменение цветов в приложении, он работал, как ожидалось, до сих пор так хорошо. Затем я заметил, что он изменил размер значков, как показано ниже:

До

После

Итак, мой вопрос:

Есть ли способ решить эту проблему, не используя CSS? Если да, то как? Или если нет никакого способа, то как я должен решить его с помощью CSS?

У вопроса есть решение - Посмотреть?

Ответы - Размер значка Vuetify / Vuetify icon size

James Vansteenkiste

05.01.2018 11:00:43

К сожалению, в текущей версии (0.17.6) вам понадобится css для создания пользовательского размера значка.

Если вы хотите установить пользовательский размер значков по умолчанию для вашего приложения, вам нужно будет настроить его на css.

Для определения размера значков можно использовать следующие параметры:

.icon {
  font-size: 20px;
}

Если вы используете Vuetify В1.0.0-Альфа.1 или более поздней версии, <v-icon> компонент имеет атрибут размера, который можно использовать для установки точного размер.

https://stackoverflow.com/questions/48119054/vuetify-icon-size/48120495#comment83286291_48120495
В настоящее время я использую версию 0.17.6, как вы упомянули, поэтому на данный момент Вы правы, по-видимому, единственный способ решить эту проблему-использовать css. Спасибо Вам большое за ваш ответ, я боролся с не-смыслом, чтобы решить эту проблему.
Kent Dela Cruz Fueconcillo

13.03.2018 10:33:10

вот пример встроенного css от v-icon

<v-icon style="font-size: 5px;">home</v-icon>

вот моя проба пера

https://codepen.io/anon/pen/LdpgmY

https://stackoverflow.com/questions/48119054/vuetify-icon-size/49250578#comment85505403_49250578
Пожалуйста, отредактируйте свой ответ, чтобы добавить коды к самому ответу.
Isuru Chandrasiri

13.04.2019 07:46:14

Вы можете указать размер значка в px, используя sizeзначках Vuetify.

Vuetify
https://stackoverflow.com/questions/48119054/vuetify-icon-size/55667745#comment100653726_55667745
Спасибо, это лучший вид решения.
Sensei

16.09.2019 05:34:33

Я рекомендую просто использовать <i>и устанавливать классы значков самостоятельно, если вы можете. <v-icon>не дает большого преимущества в любом случае, и класс v-icon-это тот, который устанавливает определенный размер шрифта, когда все, что вам действительно нужно,-это размер шрифта: наследовать.

Закрыть X