单独安装 Eva Icons 并保持动态颜色状态答案

【问题标题】：Install Eva Icons individually and keep dynamic colour states单独安装 Eva Icons 并保持动态颜色状态
【发布时间】：2020-12-02 00:30:03
【问题描述】：

我想在我的项目中使用一些 Eva 图标，因为包非常大。据我了解，我们不能单独安装图标。相反，我已经下载了 svgs 并在 app.component 中注册了 svg 包：

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries) {
      this.iconsLibrary.registerSvgPack('eva-icons', {
        'arrow-back': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="arrow-back"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23 1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2z"/></g></g></svg>',
        'book-open-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="book-open"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M20.62 4.22a1 1 0 0 0-.84-.2L12 5.77 4.22 4A1 1 0 0 0 3 5v12.2a1 1 0 0 0 .78 1l8 1.8h.44l8-1.8a1 1 0 0 0 .78-1V5a1 1 0 0 0-.38-.78zM5 6.25l6 1.35v10.15L5 16.4zM19 16.4l-6 1.35V7.6l6-1.35z"/></g></g></svg>',
        'camera': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="camera"><rect width="24" height="24" opacity="0"/><path d="M19 7h-3V5.5A2.5 2.5 0 0 0 13.5 3h-3A2.5 2.5 0 0 0 8 5.5V7H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-9-1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h-4zM20 18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1z"/><path d="M12 10.5a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0-3.5-3.5zm0 5a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5z"/></g></g></svg>',
        'menu-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="menu"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><rect x="3" y="11" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="16" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="6" width="18" height="2" rx=".95" ry=".95"/></g></g></svg>',
        'edit-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>',
        
        'teams': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="people"><rect width="24" height="24" opacity="0"/><path d="M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M17 13a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0-4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"/><path d="M17 14a5 5 0 0 0-3.06 1.05A7 7 0 0 0 2 20a1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 6.9 6.9 0 0 0-.86-3.35A3 3 0 0 1 20 19a1 1 0 0 0 2 0 5 5 0 0 0-5-5z"/></g></g></svg>',
  });
  this.iconsLibrary.setDefaultPack('eva-icons');
  }

但是，nb 状态不再像以前那样自动更改图标颜色。请您建议如何有效地做到这一点？

【问题讨论】：

标签： css angular svg icons nebular

【解决方案1】：

另一种方法是仅提取您想要的图标（从任何图标集中）的 SVG；
将其包装在动态重新创建 SVG 的 modern W3C Custom Element/WebComponent 中，
允许您使用属性、属性或 CSS 属性以任何方式更改演示文稿。

https://iconmeister.github.io/ 现在有 5000 多个图标可供您选择

然后你有没有依赖，没有外部SVG文件

作为测试，我做了所有 6 个 EVA 图标：https://jsfiddle.net/CustomElementsExamples/6uwr3ytL/
（并从 EVA 图标中清理了臃肿的 SVG）

用法：

<style>
  svg-icon {
    display: block;
    background: grey;
    --svg-icon-stroke:darkslategray;
  }
</style>
<div id=toolBar class=icons>
  <svg-icon is="arrow-back" stroke=green></svg-icon>
  <svg-icon is="book-open-outline" fill=red></svg-icon>
  <svg-icon is="camera" opacity=.2 stroke=red></svg-icon>
  <svg-icon is="menu-outline" fill=gold></svg-icon>
  <svg-icon is="edit-outline" rotate=45 fill=blue stroke=white></svg-icon>
  <svg-icon is="teams" scale=.5></svg-icon>
</div>

输出：

在 Angular、Vue 或 Svelte 中应该可以正常工作。对于 React，您必须跳过一些障碍...
因为只有 71% 的 React 支持这个现代 W3C 标准 (https://custom-elements-everywhere.com/)

(my) 相关 StackOverflow 答案：Custom Elements and SVG

【讨论】：