Question

我试图在我的Angular 4应用程序中添加离子。以下是采取的步骤：

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

我错过了somrthing吗？

Answer 1

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

打开项目文件夹，在npm支持下打开您选择的命令行工具，然后调用npm install ionicons@latest --save
确保类似"ionicons": "^4.2.4"的内容会自动出现在package.json的项目依赖项中
在"node_modules/ionicons/dist/scss/ionicons.scss"中"styles": []下的angular.json
在您的<span class="ion ion-md-attach"></span>或app.component.html或您选择的任何标记文件中添加index.html
享受=）

Answer 2

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

将离子加入项目

npm install ionicons@'2.0.1' - 保存

或在package.json
中添加以下内容
“依赖”：{

“ionicons”：“2.0.1”，

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

“风格”：[

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

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

类= “离子垃圾一个”

Answer 3

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

ng add @ionic/angular

这是一个内置的Angular原理图，它安装了Ionic库及其组件，其中包括图标。

Answer 4

请允许我总结截至2020年9月的工作方法，并提供第三种奖金方法：）

选项1： 在您的package.json中包含离子库正如其他人提到的那样，问题在于我们将包括整个IONIC库，最终仅使用图标。这是

ng add @ionic/angular

选项2：：将图标库直接用作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）： 材质图标还不错，但我特别喜欢离子图标，尤其是其轮廓变体。似乎有些“ hacky”，但是有一种方法可以使用mat-icon使用IONIC图标想法是使用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的方法文档虽然很少，但基本上我们需要的是一个SVG容器，其中包含所有离子图标（也称为SVG Sprite）

要求是：

已安装了离子，并且是package.json的一部分
在每个npm install之后运行并生成精灵的脚本
在MatIconRegistry
样式调整

首先要运行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注册Sprite。就我而言，我决定创建一个名为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>

一起使用的所有离子图标

如何在Angular组件中使用ionicon？

4 个答案: