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

Gav*_*inF 0 svg angular

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

基本上,我想使用清晰度图标包,因为我喜欢并想要使用一些现有的图标,但我希望添加另一个图标,而不是单独链接它,因为我想要清晰地处理大小/颜色等我.

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

sma*_*his 5

在较高的层次上,将自己的图标添加到Clarity Icons库只需要在应用程序的某处使用以下调用(从0.8.0开始)......

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

ClarityIcons可以在Javascript的窗口对象中使用.它是Icons库的全局API.

如果您为"0 0 36 36"视图框创建图像,那将(或应该)允许您足够轻松地使用元素中的dirsize属性clr-icon.

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