文章/答案/技术大牛

发布

社区首页 >问答首页 >带角的Ionicons版本5

问带角的Ionicons版本5
EN

Stack Overflow用户

提问于 2020-02-09 02:50:01

回答 3查看 5K关注 0票数 6

如何添加电离图标版本5到角，与版本4.5有一个scss可用，我可以用这种方式，但现在在第5版电离图标使用svgs，不知道如何集成它与角。

angular.json中的当前方法

"styles": [
              "./node_modules/ionicons/dist/scss/ionicons.scss",
              "src/app/theme/styles/styles.scss"
            ],

然后在我的app.component.ts中(我在使用星云UI) https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

我在问题中看到，离子与角它们相加

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ]

但我不知道怎么继续

ionicons

angular

ionic-framework

nebular

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-03-02 22:26:17

你可以很容易地破解这些图标。

我创建了这个要旨，您可以将其下载到项目中。

然后导入NbIonIcons const中的AppComponent，然后使用Nebular registerSvgPack从NbIconLibraries中添加它(下面的示例)

...
import {NbIonIcons} from './icons';
....
export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });

    iconsLibrary.registerSvgPack('ionicons', NbIonIcons);

    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

此时，您可以像往常一样使用图标。

<nb-icon icon="home-outline" pack="ionicons"></nb-icon>

请记住，如果从包中添加/删除图标，则必须更新列表。

票数 2

Stack Overflow用户

发布于 2020-02-20 12:51:23

Ioniconsver5看起来不再像Ionic 4、https://github.com/ionic-team/ionicons/tree/4.x#using-the-font-icon那样支持字体图标文件。

票数 2

Stack Overflow用户

发布于 2020-09-17 15:56:00

步骤1: npm安装离子图标

步骤2:在angular.json中的资产中包括电离图标

"assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "**/*",
            "input": "node_modules/ionicons/dist/ionicons",
            "output": "./ionicons"
          },
          {
            "glob": "**/*.js",
            "input": "node_modules/ionicons/dist/",
            "output": "./"
          }
        ],

步骤3:在Index.html中添加脚本

<body class="mat-typography">
<app-root></app-root>
  <script type="module" src="ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="ionicons.js"></script>
</body>

步骤4:在CUSTOM_ELEMENTS_SCHEMA中添加模式: app.module.ts

@NgModule({
declarations: [
    AppComponent
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

如果您在另一个模块中使用离子图标，请添加模式: CUSTOM_ELEMENTS_SCHEMA，这样您就不会得到web组件错误。

步骤5:使用常规的

<ion-icon name="heart"></ion-icon>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60133077

复制

相似问题

问带角的Ionicons版本5
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带角的Ionicons版本5EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带角的Ionicons版本5
EN