如何在Angular组件中使用ionicon？

Question

我正在尝试将离子类添加到我的Angular 4应用程序中.以下是采取的步骤:

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

我错过了somrthing吗？

Answer 1

在角度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. 享受=)

Answer 2

以下命令将允许您使用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 组件代码中提供的值。

Answer 3

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

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

ng add @ionic/angular

选项 2：直接使用 Icon 库作为 WebComponent。通过使用这种方式，<ion-icon>组件被注册，以便它甚至可以在普通 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 Material）： 材质图标还不错，但我特别喜欢 Ionic 图标，尤其是它们的轮廓变体。它可能看起来有点“hacky”，但有一种方法可以使用 IONIC 图标。mat-icon 这个想法是将MatIconRegistryIONIC 图标注册为 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');
});

该脚本读取文件夹中包含的所有 SVGnode_modules/ionicons/dist/ionicons/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 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您将拥有所有 Ionic 图标，可以与<mat-icon>

Answer 4

也许您已经得到了答案，但是我在我的项目中添加了以下内容：

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”