我决定尝试 Angular 2 并遇到了 Clarity，它提供了一些非常好的 UI 功能，其中之一是开箱即用的图标套件“clarity-icons”。
这些图标定义在 node_modules\clarity-icons\src\svg-icon-templates.ts
它们在一组 SVG 图标中声明，非常清晰易懂，因此认为这是添加自定义 svg 图标的简单方法和位置，但是我不知道如何实际使用这个新图标？
1，我如何构建这个新的 ts 文件？我尝试了“npm build”等，但 package.json 没有任何目标，我猜你不应该编辑 node_modules 子目录中的文件？
2、如果我构建了它，当我下次进行全新安装时，它会被覆盖吗？
基本上，我想根据自己的喜好使用清晰图标包并想使用一些现有图标，但我希望添加另一个图标而不是单独链接它，因为我希望清晰地处理大小/颜色等给我。
我还考虑过，我可以链接到 svg 文件并使用 clr-icon 标签，而不是使用形状注释？
【问题讨论】：
在高层次上，将您自己的图标添加到 Clarity 图标库只需要在应用程序的某处使用以下调用（从 0.8.0 开始）...
ClarityIcons.add({"shapeNameGoesHere": "<svg ... >[your SVG code goes here]</svg>"});
ClarityIcons 可在 Javascript 中的窗口对象之外使用。它是图标库的全局 API。
如果您为“0 0 36 36”视图框创建图像，这将（或应该）允许您在clr-icon 元素中轻松使用dir 和size 属性。
要使用装饰器类，您需要为图标的实体、标记和警报版本创建不同的路径。不过，这比你想去的要深一些。
【讨论】：
这适用于我的清晰版本 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
}
}
注意：不要忘记从包含清晰图标.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>
【讨论】：