如何應用主題或自定義星雲圖標？

Question

我正在研究星雲主題。 我必須自定義圖標字體大小等圖標。 我在這里找到了文檔。

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

我的問題是，如何更改此處可用的默認值。

我努力了

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

但它不起作用。

Answer 1

我發現更改正確參數的實際語法是：

<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;
  }
}

Answer 2

最后，它對我有用。

在component.scss文件中

nb-icon {
    font-size: 2rem;
  }