如何在Angular2清晰度图标中添加自定义图标?

加文

我决定尝试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标签?

斯玛西斯

在较高的级别上,将您自己的图标添加到“清晰度图标”库中只需要在应用程序中的某个位置(从0.8.0版开始)使用以下调用...

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

ClarityIcons在Javascript的窗口对象之外可用。这是Icons库的全局API。

如果为“ 0 0 36 36”视图框创建图像,则将(或应该)使您足够容易地使用元素中dirsize属性clr-icon

要使用装饰器类,您将需要为图标的纯色,标记和警告版本创建不同的路径。但是,这比您可能想深入的要深一些。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在ionic2中添加新的自定义字体图标

来自分类Dev

如何在Leaflet中定义多个自定义图标?

来自分类Dev

如何在 angular 5 的剑道 UI 树视图中添加自定义图标?

来自分类Dev

在Ionic 2中添加自定义图标

来自分类Dev

如何在balsamiq样机中添加自定义图像/图标?

来自分类Dev

如何在Ubuntu中添加书签的自定义图标。谷歌浏览器?

来自分类Dev

如何在balsamiq样机中添加自定义图像/图标?

来自分类Dev

如何在stimulsoft工具中向工具栏添加自定义图标

来自分类Dev

如何在@ angular / google-maps模块中将Google地图标记图标替换为自定义图标

来自分类Dev

如何在Windows XP中的自定义上下文菜单项中添加图标?

来自分类Dev

如何在 Ionic2 中添加用户定义的图标?

来自分类Dev

如何在Windows 7中将图标添加到自定义上下文菜单项?

来自分类Dev

如何在CSS中使用自定义图标自定义复选框的标签上添加缩进缩进?

来自分类Dev

离子子:如何添加自定义图标?

来自分类Dev

NestJs Swagger如何添加自定义图标

来自分类Dev

离子子:如何添加自定义图标?

来自分类Dev

向 matIconRegistry 添加自定义图标?

来自分类Dev

如何在Android Studio中导入自定义图标?

来自分类Dev

如何将自定义svg图标添加到Material UI字体图标?

来自分类Dev

Yii2中的自定义图标

来自分类Dev

如何在Angular2 / 4/5中实现自定义异步验证器

来自分类Dev

如何在Angular2中设置全局自定义标头?

来自分类Dev

如何在Angular2中制作自定义验证器

来自分类Dev

如何在后台线程中为QFileSystemModel创建自定义图标

来自分类Dev

如何在Windows 8中设置自定义应用栏按钮图标

来自分类Dev

如何在Inno Setup中引用文件关联的自定义图标?

来自分类Dev

如何在Salesforce托管包中创建自定义标签图标

来自分类Dev

如何在启动器中自定义/标记硬盘图标

来自分类Dev

如何在Google Map API中的自定义图标图像上显示标签

Related 相关文章

  1. 1

    如何在ionic2中添加新的自定义字体图标

  2. 2

    如何在Leaflet中定义多个自定义图标?

  3. 3

    如何在 angular 5 的剑道 UI 树视图中添加自定义图标?

  4. 4

    在Ionic 2中添加自定义图标

  5. 5

    如何在balsamiq样机中添加自定义图像/图标?

  6. 6

    如何在Ubuntu中添加书签的自定义图标。谷歌浏览器?

  7. 7

    如何在balsamiq样机中添加自定义图像/图标?

  8. 8

    如何在stimulsoft工具中向工具栏添加自定义图标

  9. 9

    如何在@ angular / google-maps模块中将Google地图标记图标替换为自定义图标

  10. 10

    如何在Windows XP中的自定义上下文菜单项中添加图标?

  11. 11

    如何在 Ionic2 中添加用户定义的图标?

  12. 12

    如何在Windows 7中将图标添加到自定义上下文菜单项?

  13. 13

    如何在CSS中使用自定义图标自定义复选框的标签上添加缩进缩进?

  14. 14

    离子子:如何添加自定义图标?

  15. 15

    NestJs Swagger如何添加自定义图标

  16. 16

    离子子:如何添加自定义图标?

  17. 17

    向 matIconRegistry 添加自定义图标?

  18. 18

    如何在Android Studio中导入自定义图标?

  19. 19

    如何将自定义svg图标添加到Material UI字体图标?

  20. 20

    Yii2中的自定义图标

  21. 21

    如何在Angular2 / 4/5中实现自定义异步验证器

  22. 22

    如何在Angular2中设置全局自定义标头?

  23. 23

    如何在Angular2中制作自定义验证器

  24. 24

    如何在后台线程中为QFileSystemModel创建自定义图标

  25. 25

    如何在Windows 8中设置自定义应用栏按钮图标

  26. 26

    如何在Inno Setup中引用文件关联的自定义图标?

  27. 27

    如何在Salesforce托管包中创建自定义标签图标

  28. 28

    如何在启动器中自定义/标记硬盘图标

  29. 29

    如何在Google Map API中的自定义图标图像上显示标签

热门标签

归档