9

我正在尝试将 ionicons 添加到我的 Angular 4 应用程序中。以下是采取的步骤：

  1. 在http://ionicons.com/我下载了 zip 文件并将其解压缩。
  2. 我在我的 Angular 项目中创建了一个名为icons的新文件夹
  3. 我将ionicon.min.css 文件和字体文件夹从解压缩包中拖到我的新图标文件夹中。
  4. 在项目的index.html文件中，我添加了 css 文件。
  5. 现在在我预先创建的页脚组件中，我正在尝试使用图标。
  6. 我在 index.html 文件中收到关于我的路径的服务器错误。

我错过了什么吗？

4

4 回答 4

17

在 angular 6.3.x 和 npm 6.1.x 中获取离子的方法...

  1. 打开您的项目文件夹，使用 npm 支持打开您选择的命令行工具并调用npm install ionicons@latest --save
  2. 确保类似的东西"ionicons": "^4.2.4"会自动出现在您的项目依赖项中package.json
  3. 在您的部分"node_modules/ionicons/dist/scss/ionicons.scss"下方添加"styles": []angular.json
  4. 添加<span class="ion ion-md-attach"></span>您的app.component.html或index.html您选择的任何标记文件
  5. 享受 =)
于 2018-07-01T19:57:45.747 回答
10

以下命令将允许您使用 Ionicons 4.x 提供的ion-*类和<ion-icon name="..."></ion-icons>Web 组件：

ng add @ionic/angular

这是一个内置的 Angular 原理图，它安装了 Ionic 库及其组件，其中包括图标。完成后，您可以在项目中使用 Ionicons，如下所示：

<ion-icon name="logo-facebook"></ion-icon>

该name属性对应于ionicons.com上为特定图标提供的Web 组件代码中提供的值。

于 2019-11-29T01:04:58.113 回答
3

可能您已经得到了答案，但在这里我是如何在我的项目中添加的：

  1. 将离子添加到您的项目中

    npm install ionicons@'2.0.1' --save

    或在 package.json 中添加以下内容

    “依赖”：{

    “离子”：“2.0.1”，

    }

  2. 然后在 angular-cli.json 中添加 css 或 sass 文件以加载到您的应用程序中。

    “风格”：[

    “../node_modules/ionicons/scss/ionicons.scss”

    ]

    注意：路径可能会根据您要安装的版本而改变。对于上面提到的版本，这是路径。

  3. 现在你应该可以走了。

    类="离子垃圾-a"

于 2017-12-11T09:56:05.533 回答
2

请允许我总结一下截至 2020 年 9 月的工作方法，并提供第三种奖励方法:)

选项 1： 在您的中包含 Ionic 库package.json 正如其他人所提到的，问题是我们将包含整个 IONIC 库以最终只使用图标。就是这样

ng add @ionic/angular

选项 2：将图标库直接用作 Web 组件。通过使用这种方式，<ion-icon>组件被注册，因此它甚至可以在 vanilla javascript 中使用。这可以通过简单地将以下脚本添加到您的index.html

<script type="module" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.esm.js"></script>

然后您可以<ion-icon>在模板中使用 WebComponent，例如

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

顺便说一句，您还应该添加schemas: [CUSTOM_ELEMENTS_SCHEMA]到您的app.modules.ts配置中以避免 Angular 抱怨'ion-icon'不是已知元素。

奖励（如果您使用 Angular 材质）： 材质图标还不错，但我特别喜欢 Ionic 图标，尤其是它们的轮廓变体。它可能看起来有点“hacky”，但有一种方法可以使用 IONIC 图标，mat-icon 这个想法是用来MatIconRegistry将 IONIC 图标注册为 Angular Material 的一部分。如果您只想使用两个或三个图标，这很容易，事实上，这里有一些关于它的帖子https://riptutorial.com/angular-material2/example/32566/using-svg-icons和这里https:// /dev.to/elasticrash/using-custom-made-svg-icons-through-the-angular-material-library-2pif

然而，对于那些需要所有图标的人来说，这种方法是不可扩展的，但是还有另一种“喂”MatIconRegistry使用matIconRegistry.addSvgIconSetInNamespace 的方法。文档很少，但基本上我们需要的是一个包含所有 Ionic 图标的 SVG 容器（又名 SVG Sprite）

要求是：

  1. 安装了 Ionicons 和 package.json 的一部分
  2. npm install在 every 之后运行并生成精灵的脚本
  3. 注册 Sprite 所需的代码MatIconRegistry
  4. 风格调整

对于第一点，只需运行npm i ionicons。对于第二个，确保将以下脚本保存到项目的根目录中，我将其命名为，postinstall.js但您可以自由选择所需的名称。此外，svgstore通过运行将包添加到您的开发依赖项npm i svgstore -D

// postinstall.js

const fs = require('fs');
const path = require('path');
const svgstore = require('svgstore');

const normalizePath = (folderPath) => path.resolve(path.normalize(folderPath));
const SVG_INPUT_FOLDER = normalizePath('node_modules/ionicons/dist/ionicons/svg');
const SPRITE_OUTPUT_FOLDER = normalizePath('src/assets/images/');
const GENERATED_SPRITE_NAME = path.join(SPRITE_OUTPUT_FOLDER, 'ionic-icons.svg');

const sprite = svgstore();
console.log('Generating SVG Sprite');
fs.readdir(SVG_INPUT_FOLDER, function (err, files) {

  if (err) {
    return console.log('Ups, there was an error reading the Directory: ' + err);
  }
  files
    .filter(el => /\.svg$/.test(el))
    .forEach((file) => {
      sprite.add(file.replace('.svg', ''), fs.readFileSync(`${SVG_INPUT_FOLDER}/${file}`, 'utf8').replace(/<title.*>.*?<\/title>/ig, ''));
    });
  fs.writeFileSync(GENERATED_SPRITE_NAME, sprite);
  console.log('Sprite generated successfully');
});

该脚本读取node_modules/ionicons/dist/ionicons/svg文件夹中包含的所有 SVG，并将精灵保存为src/assets/images/ionic-icons.svg. 正如我之前所说的，这个脚本应该在每个 中运行npm install，这可以通过简单地编辑你的package.json文件并"postinstall": "node postinstall.js"在scripts部分中添加来实现。

几乎就在那里：使用MatIconRegistry. 就我而言，我决定创建一个名为 Material 的模块，然后将其导入app.module.ts

// material.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  declarations: [],
  exports: [MatIconModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configureMatIconRegistry,
      multi: true,
      deps: [MatIconRegistry, DomSanitizer]
    }
  ]
})
export class MaterialModule {}

export function configureMatIconRegistry(
  matIconRegistry: MatIconRegistry,
  domSanitizer: DomSanitizer
): () => Promise<void> {
  return (): Promise<any> => {
    matIconRegistry.addSvgIconSetInNamespace(
      'ionicon',
      domSanitizer.bypassSecurityTrustResourceUrl('assets/images/ionic-icons.svg')
    );
    return Promise.resolve();
  };
}

相关部分是，configureMatIconRegistry但我认为是不言自明的。

最后但同样重要的是：样式我们的 mat-icon 可以像这样使用：

<mat-icon svgIcon="ionicon:heart-outline"></mat-icon>

但是，由于这些图标的创建方式（我指的是原始 SVG），我们需要进行一些样式调整。只需确保将其放在您的全局样式中以针对mat-icons整个应用程序进行定位，不要担心“常规”材质垫图标将保持不变。

// styles.scss
 .mat-icon {
      &[data-mat-icon-namespace="ionicon"] {
        display: inline-block;
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        contain: strict;
        fill: currentcolor;
        box-sizing: content-box !important;
        svg {
          stroke: currentcolor;
    
          .ionicon {
            stroke: currentColor;
          }
    
          .ionicon-fill-none {
            fill: none;
          }
    
          .ionicon-stroke-width {
            stroke-width: 32px;
          }
        }
        .ionicon,
        svg {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }

差不多就是这样！现在，npm install您将拥有所有准备好与<mat-icon>

于 2020-09-14T09:25:59.880 回答