Как применить тему или настроить значки Nebular?

Я работаю над темой Nebular. Мне нужно настроить значки, например, размер шрифта значка. Я нашел документацию здесь.

<nb-icon icon="file-text-outline"></nb-icon>

Мой вопрос: как изменить значения по умолчанию, доступные здесь.

я пытался

<nb-icon [options]={icon-font-size:'1.5rem'} icon="file-text-outline"></nb-icon>

Но это не работает.


person Udhayakumar    schedule 09.12.2020    source источник


Ответы (2)


Я обнаружил, что фактический синтаксис для изменения правильных параметров:

<nb-icon [config]="{icon: 'file-text-outline', options: {'icon-font-size': '1.5rem'}}"></nb-icon>

Однако отображение значков по-прежнему контролируется через SCSS (\@nebular\theme\styles\core\theming\_install.scss). Поэтому я предлагаю удалить привязки и изменить все, что вам нужно, через SCSS ваших компонентов. Вот соответствующие селекторы для каждого option:

nb-icon {
  font-size: 1.5rem;
  line-height: 2;
  width: 2em;
  height: 2em;
  color: #000000; //For unspecified status
  
  svg {
    vertical-align: bottom;
  }

  &.status-basic {
    color: grey;
  }

  &.status-primary {
    color: aqua;
  }

  &.status-info {
    color: bisque;
  }

  &.status-success {
    color: blueviolet;
  }

  &.status-warning {
    color: chocolate;
  }

  &.status-danger {
    color: darkgoldenrod;
  }

  &.status-control {
    color: darkseagreen;
  }
}
person noamyg    schedule 29.12.2020
comment
я пробовал это <nb-icon [config]="{icon: 'file-text-outline', options: {'icon-font-size': '2.5rem'}}"></nb-icon>. Но у меня не работает. - person Udhayakumar; 20.01.2021
comment
@Udhayakumar, ты все прочитал? Я упомянул, что это не сработает. However, the display of the icons is still being controlled through the SCSS. Затем я добавил полный SCSS для каждого варианта. - person noamyg; 20.01.2021
comment
Работает nb-icon { font-size: 2rem; }. Спасибо - person Udhayakumar; 20.01.2021

наконец, это сработало для меня.

в файле component.scss

nb-icon {
    font-size: 2rem;
  }
person Udhayakumar    schedule 19.01.2021