Question

我已经决定尝试使用Angular 2并且遇到了Clarity，它提供了一些非常好的UI功能，其中一个是一套开箱即用的图标＆＃34;清晰度图标＆＃34;。这些图标在node_modules \ clarity-icons \ src \ svg-icon-templates.ts中定义它们在一组SVG图标中声明，这些图标非常清晰且易于理解，因此认为这是添加自定义svg图标的简单方法和地点，但我不知道如何实际使用这个新图标？
1，如何构建这个新的ts文件？我试过＆＃34; npm build＆＃34;等没有package.json没有目标，我猜你不应该编辑node_modules子目录中的文件？ 2，如果我确实构建它，那么当我接下来进行全新安装时它会被覆盖吗？

基本上，我想使用clear-icon包，因为我想要使用一些现有的图标，但是我希望添加另一个图标，而不是单独链接它，因为我希望清晰地处理大小/颜色等对我而言。

我还考虑过，不是使用形状注释，而是可以链接到svg文件并使用clr-icon标签？

Answer 1

在较高的层面上，将自己的图标添加到Clarity Icons库只需要在应用程序的某个地方使用以下调用（从0.8.0开始）......

ClarityIcons.add({"shapeNameGoesHere": "<svg ... >[your SVG code goes here]</svg>"});

ClarityIcons在Javascript中可以在窗口对象下使用。它是图标库的全局API。

如果为＆＃34; 0 0 36创建图像，那将（或应该）允许您轻松地使用dir元素中的size和clr-icon属性36＆＃34;视框。

要使用装饰器类，您需要为图标的实体，标记和警报版本创建不同的路径。这比你想要的要深一点。

clarity clarity-icons

Answer 2

这对我来说非常适用于清晰度版本0.11.8及更高版本的angular-CLI。创建服务 custom-icons.service.ts

import {Injectable} from "@angular/core";
import {ClarityIcons} from "@clr/icons"; 
@Injectable()
export class CustomClarityIcons {
  icons: any = {
    "sample-icon": '<svg version="1.1" id="Layer_1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" \t viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <g> \t<path d="M31.1,23.1c-1.2,0-3.3-0.7-4.1-5.1C25.5,9.7,26,3.4,16.5,3l0,0c-0.2,0-0.3,0-0.5,0c-0.2,0-0.3,0-0.5,0l0,0 \t\tC6,3.4,6.3,9.5,5,18c-0.7,4.5-2.8,5.1-4.1,5.1C0.4,23.1,0,23,0,23v6h32v-6C32,23,31.6,23.1,31.1,23.1z M30,27H2v-2 \t\tc1.7-0.4,4.2-1.8,5-6.7c0.1-0.9,0.3-1.9,0.4-2.7c1-7,1.4-10.2,8.2-10.6h0.3l0,0l0,0h0.4c6.6,0.3,7.1,3.4,8.1,10.2 \t\tc0.2,1,0.3,2.1,0.5,3.2c0.9,4.9,3.3,6.3,5,6.7L30,27L30,27z"/> \t<rect x="13.8" width="4.5" height="2"/> \t<rect x="12" y="30" width="8" height="2"/> </g> <polygon points="22.4,13.1 20.3,11 16,15.2 11.8,11 9.7,13.1 13.9,17.4 9.7,21.6 11.8,23.7 16,19.5 20.3,23.7 22.4,21.6 18.1,17.4 \t"/></svg>' 
  }
  public load() {
    ClarityIcons.add(this.icons)
  }
}

然后将此注入到您的组件中

import { Component } from '@angular/core';
import { CustomClarityIcons } from '../custom-clarity-icons';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private customClarityIcons : CustomClarityIcons ) {
    customClarityIcons .load(); //injecting custom-icons here to app component so that can be used across the aplication
  }
}

注意：不要忘记从包含clarity-icons.js的脚本部分中删除“../node_modules/clarity-icons/clarity-icons.min.js”。在angula-cli.json中避免运行ClarityIcons的两个实例。另外在app.module.ts中添加CustomClarityIcons然后在HTML中执行此操作

<clr-icon shape="sample-icon"></clr-icon>

如何向Angular2 Clarity-icons添加自定义图标？

2 个答案: