Clarity: [Icon] Can't integrate Clarity Icons in own Projekt

[DenHerrRing]

Hello!
I can't integrate Clarity Icons in my Angular Projekt

I have the following instructions installed:
npm install @ clr / icons --save
npm install @ webcomponents / custom-elements @ 1.0.0 --save
import '@clr/icons'; -> At angularpoint where i want integrate the Icons
import '@clr/icons/shapes/all-shapes';-> At angularpoint where i want integrate the Icons
npm install @clr/angular --save + Import ClarityModule

The libraries have been inserted in angular-cli.json.

If I now want to include an icon over <clr-icon shape =" check "> </ clr-icon>

I get the following error message:

ERROR Error: Uncaught (in promise): NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
Error: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Object.eval (index.js:596)
    at __webpack_require__ (index.js:30)
    at Object.defineProperty.value (index.js:73)
    at eval (index.js:76)
    at webpackUniversalModuleDefinition (index.js:3)
    at eval (index.js:10)
    at Object../node_modules/@clr/icons/index.js (pages.module.chunk.js:6)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (pages.module.ts:8)
    at Object../src/app/pages/pages.module.ts (pages.module.chunk.js:378)
    at Object.eval (index.js:596)
    at __webpack_require__ (index.js:30)
    at Object.defineProperty.value (index.js:73)
    at eval (index.js:76)
    at webpackUniversalModuleDefinition (index.js:3)
    at eval (index.js:10)
    at Object../node_modules/@clr/icons/index.js (pages.module.chunk.js:6)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (pages.module.ts:8)
    at Object../src/app/pages/pages.module.ts (pages.module.chunk.js:378)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)

[adityarb88]

@MrCrunsh: Could you please share your .angular-cli.json? You could also take a look at how we integrate icons on our website here: https://github.com/vmware/clarity/blob/website/latest/.angular-cli.json

Let us know if that helps.

cc: @shijir

[Shijir]

Hi @MrCrunsh, how are you integrating the custom-elements polyfill in your project?

Based on the error message you posted, I am guessing there might be multiple libraries integrated for polyfilling custom elements.

[SpencerHehl]

I'm not sure what @MrCrunsh has set up but I just cloned and am playing with the ClaritySeed app and without any configuration for using the icons I get an error that clr-icon is not a known element. When i try adding the import "clr/icons" I get the error @MrCrunsh does. So for me the .angular-cli.json is whatever is included in the seed app no modifications.

EDIT: I'm not sure why but it keeps stripping out the import statement when i have an at symbol so i'm removing that.

[Shijir]

As I posted above, I am guessing there might be multiple libraries that do the same thing. Or is there any chance you guys are loading Clarity Icons twice? There are two ways to load Clarity Icons. You have to use only one of them. If you are loading by importing like this:

import '@clr/icons';

make sure clr-icons.min.js is not loaded in your .angular-cli.json

[gnomeontherun]

If you declare a web component more than once you get the NotSupportedError. See https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

So as @Shijir says use only one way to import the icons via the .angular-cli.json file or import '@clr/icons'; method.

I think our docs could be a little more clear about this, so we should tweak the how to use section.

[SpencerHehl]

Well again let's assume it is declared in your seed app's .angular-cli.json and that is causing the error when I try to import in TS. Then I still am faced with the other issue mentioned in the above post that the clr-icon is not a known element so something is missing from the seed app's current declaration I would imagine.

[hippee-lee]

Hi @SpencerHehl, @MrCrunsh - this sounds like an issue for the clarity-seed repo.
I'm going to close this and open an issue over there. If its not an issue for the clarity-seed please let me know and I will re-open this one.

Please add any additional details that I missed there. I'll take a look at it as soon as I can.
https://github.com/vmware/clarity-seed/issues/77

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.