ngneat / svg-icon Goto Github PK

View Code? Open in Web Editor NEW

252.0 252.0 35.0 4.22 MB

👻 A lightweight library that makes it easier to use SVG icons in your Angular Application

Home Page: https://netbasal.com

License: MIT License

JavaScript 7.69% TypeScript 90.53% HTML 1.37% SCSS 0.17% Shell 0.24%

angular icons svg svg-icons

svg-icon's People

Contributors

Stargazers

Watchers

svg-icon's Issues

Cannot use `SvgIconComponent` in standalone component

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Tried to import SvgIconComponent in standalone components, but got an error The component 'SvgIconComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule. (@ngneat/svg-icon version => 4.1.4)

Expected behavior

SvgIconComponent should be a standalone component

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 15.1.2


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Incorrect SVGO plugin JSON Example

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The second config cleanupAttrs is specified at the same place as the first config. It's not correct.

Expected behavior

Each config should become each item ie

"svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,          
        },
        {
          "cleanupAttrs": true
        }
      ]
    }

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Fixed icon sizes ignored after Angular v13 minor upgrade

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

After upgrading Angular from v13.2.3 to v13.3.2 all the svg-icon have a size of 1em. The fixed sizes are ignored now:

        SvgIconsModule.forRoot({
            defaultSize: 'md',
            icons,
            missingIconFallback: appInfo,
            sizes: {
                //'xs': '8px',
                'sm': '16px',
                'md': '20px',
                'lg': '24px',
                'xl': '32px',
                'xxl': '48px',
            }
        })

Expected behavior

The fixed icon sizes should not be overriden by another style.

Environment


Angular version: 13.3.2
@ngneat/svg-icon: 4.1.0


Browser:
- [X] Chrome (desktop) version 100
 
For Tooling issues:
- Node version: 16.13.0
- Platform:  Mac

Additional sizes

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Feature description

The size attribute currently supports 4 sizes. In our application we have more than 4 different sizes. It would be nice to have also xl and xxl as possible size options.

Error on ngAdd: Could not find file for path: /src/@app/app.module.ts

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

On ngAdd, after the step 'update.package.json', the schematic stops with the error message: Could not find file for path: /src/@app/app.module.ts

Expected behavior

Schematic effectively installs packege

Minimal reproduction of the problem with instructions

I suspect that this issue has something to do with my application setup, though what the problem is I can't figure out. I have a fairly normal setup Project > src > app > app.module. The inclusion of the '@' symbol in the error seems to indicate some bug in defining a path to the app.module file.

What is the motivation / use case for changing the behavior?

Enabling install in all environments

Environment

MacOS + Windows (tried both), terminal/power shell.


Angular version: 11.2.2


For Tooling issues:
- Node version: v12.14.0
- Platform:  Mac/Windows

Make multi-config possible for svg-generator

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Right now, a single config can be used because of this line:

svg-icon/svg-generator/index.ts

Line 7 in 0c08b50

const config: Config | null = explorerSync.search()?.config;

A single config can be specified (unless I don't know how to do it?)

What is the motivation / use case for changing the behavior?

In a Nx monorepo setting with multiple apps that use different svg assets, I'd like to be able to launch svg-generator with multiple configs.

Specifying the directory where the config lookup should start with cosmiconfig would be enough for me to setup various Nx executors with their own configs.

Maybe a command line argument would do the trick?

Size not respected when [key] input changes

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I have a detail component which displays an svg-icon:

<svg-icon color="white" size="lg" [key]="getKey()"></svg-icon>

The initial size of the icon is indeed large (48px):

<svg-icon _ngcontent-vst-c67="" color="white" size="lg" _nghost-vst-c18="" ng-reflect-color="white" ng-reflect-size="lg" ng-reflect-key="first" role="img" class="svg-icon-first" style="color: white; font-size: 48px;">

When the single @Input of the component changes the key is updated according. The icon changes correctly but the size is reverted to the default size of medium (20px) instead of the specified size of large due to the style attribute having the incorrect font-size:

<svg-icon _ngcontent-vst-c67="" color="white" size="lg" _nghost-vst-c18="" ng-reflect-color="white" ng-reflect-size="lg" ng-reflect-key="second" role="img" class="svg-icon-second" style="color: white; font-size: 20px;">

Expected behavior

The size should remain large.

Minimal reproduction of the problem with instructions

Create a component with an @input that changes the svg-icon's key input.

Environment


Angular version: 11.0.5

Browser:
- [X] Chrome (desktop) version 87.0.4280.88
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Can't resolve '../assets/svg/svg-icons'

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When following the instructions to install the package the following error occurs:

Failed to compile.

./src/app/app.module.ts
Module not found: Error: Can't resolve '../assets/svg/svg-icons' in '/Users/xyz/Projects/dashboard/src/app'

Expected behavior

The svg-icons file should be in the mentioned location.

Minimal reproduction of the problem with instructions

Simply run ng add @ngneat/svg-icon

What is the motivation / use case for changing the behavior?

Environment


Angular version: 11.0.5


Browser:
- [X] Chrome (desktop) version 87
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v12.19.0  
- Platform:  Mac

Others:

The following files are generated. As you can see the referenced file is not there:

app/index.ts
app/svg/app-*.icon.ts (all icon files)
app/svg/my-icons.model.ts

Icon is not rendered with IE11

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

With IE11, it fails to render an icon. The following gets to JS console:
TypeError: Argument not optional

Investigation shows that this happens because this.element.classList is not supported for SVGs in IE11.

Expected behavior

Should render the icon, without an error message

Minimal reproduction of the problem with instructions

Standard <svg-icon key="settings"></svg-icon> is enough to reporduce with IE11

What is the motivation / use case for changing the behavior?

IE11 is still a standard browser for many corporate users

Environment


Angular version: 9.1.8


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [X] IE version 11
- [ ] Edge version XX

Referencing of schematics-utilities is causing older @angular-devkit/schematics to be installed.

I'm submitting an issue in my current project which causes my builds to fail when using svg-icon library. This is due to added dependency of schematics-utilities that is causing my @angular-devkit/schematics to install an older version which schematics-utilities is referencing.


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[] Other... Please describe:

Current behavior

My project fails to build due to the usage of [email protected] which references "@angular-devkit/schematics": "^0.7.2",
As the older angular-devkit/schematics and angular-devkit/core of version 0.7.2 is installed in my environment.

Expected behavior

Project should build.

The root package.json references "schematics-utilities": "2.0.2", however the library package.json references the older version "schematics-utilities": "1.1.1".

Update library package.json to reference "schematics-utilities": "2.0.2"

Minimal reproduction of the problem with instructions

I've tried to reproduce this issue in another clean project but have been unable to.

What is the motivation / use case for changing the behavior?

See search: Github Search

Error: inject() must be called from an injection context (SvgIconRegistry issue)


[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Support request

Current behavior

Updated version to 3.1.1 (from 1.0.0) and got next error:

AppModule

....
imports: [
    SvgIconsModule.forRoot({ icons: ICONS }), 
    // ICONS = [ {name: 'test', data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"></svg>' } ] 
],
providers: [
 SvgIconRegistry
// Also tried { provide: SvgIconRegistry, useClass: SvgIconRegistry }
]
...

Just attached like this. And got an error.
This occurs in that place:
(ngneat-svg-icon.js:16)

...
class SvgIconRegistry {
    constructor(config) {
        this.svgMap = new Map();
        this.document = inject(DOCUMENT); // here, issue with 'inject'
        if (config.icons) {
            this.register(config.icons);
        }
    }
    ....

Also, use it inside the shared module:

...
imports: [
SvgIconsModule.forChild(getIcons())
],
exports: [
SvgIconsModule
]
...

But even when removed from the shared module - still an error.

Expected behavior

All works as before. The project starts without that issue.

Minimal reproduction of the problem with instructions

Update version from 1.0.0 into 3.1.1.
npm run start

What is the motivation/use case for changing the behavior?

Can't work with the latest version of the library.

Environment

VS Code


Angular version: 8.2.14

Browser:
- Chrome (desktop) version Version 90.0.4430.85 (Official Build) (arm64)
 
For Tooling issues:
- Node version: v14.16.0
- Platform: Mac

Other:
- I don't use Ivy

Svg generator with folders not work properly

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In version 2.0 i can have folders inside folders and all work fine - in 6.0 version a got error and incorected file path and index.
In the image this is index.ts in the "root" forlder

Expected behavior

all work like in version 2.0 ( folders inside folder not create additional rows in main index.ts file - all are separately

Minimal reproduction of the problem with instructions

  "svgGenerator": {
    "outputPath": "./src/app/utils/svg",
    "prefix": "fms",
    "srcPath": "./src/assets/svg",
    "rootBarrelFile": false,
    "svgoConfig": {
      "plugins": [
        "removeDimensions",
        "cleanupNumericValues",
        "reusePaths",
        {
          "name": "convertColors",
          "params": {
            "currentColor": true
          }
        }
      ]
    }
  }

Environment


Angular version: 13.1.2
"@ngneat/svg-generator": "^6.0.0",


 
For Tooling issues:
- Node version: v18.15.0
- Platform:  Windows

FontSize property has wrong 'number' type, instead of being of type 'string'

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When using the fontSize property to set the icon size and the Angular strict template checking is in place, the library generates an error. The issue is that in the svg-icon.component.ts file, the fontSize property type is defined as number, while it should be a string in order to correctly passing values like: "24px" (as also stated in the docs).

Expected behavior

It should be possible to use string values for fontSize property, without triggering an error in strict mode.

Minimal reproduction of the problem with instructions

Create a brand new Angular App with Strict Template checking and import the svg-icon library.
Set fontSize property using "24px" or any similar value.

What is the motivation / use case for changing the behavior?

Fixing a current issue/inconsistency in the library.

Environment


Angular version: 10.2.0

Browser:
- [X] Chrome (desktop) version 86.0.4240.183
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.18.2
- Platform:  Mac

strict compilation results in error

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

running ngc results in

> ngc -p src/tsconfig.aot.json

../node_modules/@ngneat/svg-icon/lib/svg-icons.module.d.ts:6:51 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

6     static forRoot(config?: Partial<SVG_CONFIG>): ModuleWithProviders;
                                                    ~~~~~~~~~~~~~~~~~~~

No compilation errors

My tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "es6",
      "dom"
    ],
    "baseUrl": ".",
    "rootDir": ".",
    "outDir": "../ngc/esnext",
    "types": [
      "node"
    ],
    "declaration": false,
    "removeComments": true,
    "stripInternal": true,
    "alwaysStrict": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "paths": {
      "backoff-rxjs": [
        "./shared/backoff-rxjs/index.ts"
      ]
    }
  },
  "include": [
    "./frontend",
    "./shared"
  ],
  "exclude": [
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "disableTypeScriptVersionCheck": true,
    "annotateForClosureCompiler": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}

import SvgIconComponent documentation

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Since upgrade to version 5, library is provided as Standalone app. It would be fine to mention in readme that user needs to import SvgIconComponent in order to use it.

Regression: Not possible to provide array of source paths for icon generation

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

You are not allowed to provide an array of source paths for icon generation, it was possible before your own svg-generator.

Expected behavior

You can provide an array of source paths for icons.

Minimal repoduction

old:

"svg-to-ts": {
    "conversionType": "object",
    "srcFiles": [   
      "./src/assets/svg/*.svg" ,
     "./node_modules/some_lib/assets/svg/*.svg"
    ],
    "outputDirectory": "./src/assets/svg",
    "fileName": "svg-icons",
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }

new:

"svgGenerator": {
    "outputPath": "./src/app/svg",
    "prefix": "app",
    "srcPath": "./src/assets/svg", // Array will throw error
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }

What is the motivation/use case for changing the behavior?

For example generation of icons from node_modules and project assets.

Environment

Don't see icons, when run with aot: true (or build --prod --aot="true")

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request

Current behavior

No icons inside in production build

Expected behavior

Icons exist inside in production build

Minimal reproduction of the problem with instructions

Install Angular 8.2.14, ngneat svg-icon 3.2.0.
run locally with aot: true (inside angular.json: architect -> build -> options -> aot: true) , or build --prod --aot="true")
when aot=true - no icon

when aot=false - icon exist

Tried to reproduce the code in stackblitz. But here somehow it works (
https://stackblitz.com/edit/angular-ivy-d2mmak?file=src%2Fapp%2Fapp.component.html

What is the motivation / use case for changing the behavior?

Fix issues with build.

Environment


Angular version: 8.2.14

Browser:
- [ ] Chrome (desktop) version 91.0.4472.77 (Official Build) (arm64)
 - [] Firefox 88.0.1 (64-bit)
 
For Tooling issues:
- Node version: v14.16.0
- Platform:  Mac, M1

Others:
"@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",

Running ng-add on new project fails

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

ng add will fail if assets/svg folder not exists

Expected behavior

ng add should not run npm run generate-icons if there is no svg folder / shouldn't run at all / console log instructions with next steps

Minimal reproduction of the problem with instructions

ng new svg-icons-test
ng add @ngneat/svg-icon
Output:

ng add @ngneat/svg-icon
Installing packages for tooling via npm.
Installed packages for tooling via npm.
    ✅️ Update package.json
    🔍 Installing package...
    ✅️ @ngneat/svg-icon is imported
    👏 @ngneat/svg-icon ready to use
UPDATE src/app/app.module.ts (459 bytes)
✔ Packages installed successfully.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate-icons: `svg-to-ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] generate-icons script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vladta/.npm/_logs/2021-01-19T09_32_51_893Z-debug.log
Unknown error: Error: Command failed: npm run generate-icons
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate-icons: `svg-to-ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] generate-icons script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vladta/.npm/_logs/2021-01-19T09_32_51_893Z-debug.log

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Plugin name should be specified

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

yarn run v1.22.11
$ svg-generator
C:\Projekte\web-app\node_modules\svgo\lib\svgo\config.js:113
      throw Error(`Plugin name should be specified`);
      ^

Error: Plugin name should be specified
    at resolvePluginConfig (C:\Projekte\web-app\node_modules\svgo\lib\svgo\config.js:113:13)
    at Array.map (<anonymous>)
    at Object.optimize (C:\Projekte\web-app\node_modules\svgo\lib\svgo.js:45:37)
    at Object.createTree (C:\Projekte\web-app\node_modules\@ngneat\svg-generator\tree.js:49:40)
    at Object.generateSVGIcons (C:\Projekte\web-app\node_modules\@ngneat\svg-generator\generator.js:19:32)
    at Object.<anonymous> (C:\Projekte\web-app\node_modules\@ngneat\svg-generator\index.js:9:13)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v14.17.0
- Platform:  windows

Others:

Icon provided at standalone component level is not rendering

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Icon provided at standalone component level is not rendering.

Expected behavior

Should render all the provided icons at root level and component level.

Minimal reproduction of the problem with instructions

Issue is reproduced in this stackblitz

What is the motivation / use case for changing the behavior?

Environment


Angular version: 15.2.8


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Platform:  Stackblitz

Others:

Below is the list of dependencies

SvgIcons definition is overridden in Nx monorepo with several libs

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

Hi,
First of all, thanks a lot for this lib !
I have a mono repo project with several libs, and I want my icons to be located in the right libs. I was able to use the config-dir option to get several config, but I have a problem with the generated SvgIcons object. It keeps only the last generated icons. So my libs won't compile because definitions are missing. How do you think I can solve that situation?

Expected behavior

Gettings all icons definitions in SvgIcons (types.d.ts)

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 15.1.5


Browser:
- [ x] Chrome (desktop) version XX
- [ x] Chrome (Android) version XX
- [x ] Chrome (iOS) version XX
- [ x] Firefox version XX
- [ x] Safari (desktop) version XX
- [ x] Safari (iOS) version XX
- [ ] IE version XX
- [ x] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

svg-generator doesn't work

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[] Other... Please describe:

Current behavior

While genereting svg-generator I get this:
TypeError: (0 , svgo_1.optimize) is not a function at createTree (...\node_modules\@ngneat\svg-generator\tree.js:49:53) at createTree (...\node_modules\@ngneat\svg-generator\tree.js:25:30) at generateSVGIcons (...\node_modules\@ngneat\svg-generator\generator.js:19:47) at Object.<anonymous> (...\node_modules\@ngneat\svg-generator\index.js:9:34) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) at internal/main/run_main_module.js:17:47

and ofc ts files are not generated.

Expected behavior

Ts files should be generated

Environment

"@angular/animations": "~13.2.5",
"@angular/cdk": "^13.2.5",
"@angular/common": "~13.2.5",
"@angular/compiler": "~13.2.5",
"@angular/core": "~13.2.5",
"@angular/forms": "~13.2.5",
"@angular/material": "^13.2.5",
"@angular/platform-browser": "~13.2.5",
"@angular/platform-browser-dynamic": "~13.2.5",
"@angular/router": "~13.2.5",
"@ngneat/svg-icon": "^4.1.0",
It also happened on old svg-icon version when angular 13.2.5 was newest so changing version didn't change anything

For Tooling issues:

Node version: 14.17.3
Platform: Windows

Others:
npm list @ngneat/svg-icon doesn't provide any information.
When i log svgo_1.optimize I get undefined

style="color: var(--svg-icon-color)" added even if color == undefined

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

<svg-icon> adds style="color: var(--svg-icon-color)" to the element, even if color is undefined. This forces us to write code like this which looks very ugly. Since the element has a color in the style property, this would then override css-classes that tried to change the color of the icon.

@Component({
  selector: 'hpi-icon',

  // Even if color is undefined, <svg-icon> would add style="color: var(--svg-icon-color)" to the element which defaulted to a white icon.
  // This is a temporary fix until this is (hopefully) fixed
  template: `
    <svg-icon *ngIf="color" [key]="key" [fontSize]="fontSize" [color]="color"></svg-icon>
    <svg-icon *ngIf="!color" [key]="key" [fontSize]="fontSize"></svg-icon>
  `,
  styles: [
    `
      svg-icon {
        color: var(--color-grey-1100);
        line-height: 1;
        vertical-align: middle;
      }
    `
  ]
})
export class IconComponent {
  @Input() key: SvgIcons;
  @Input() color: string | undefined;
  @Input() fontSize: string | undefined;

  @Input() set size(size: IconSize) {
    this.fontSize = iconSizes[size];
  }
}

Expected behavior

if @Input color of <svg-icon> is undefined it should not add any color styling at all to the DOM element.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 14.1.1
 "@ngneat/svg-icon": "^6.3.0",

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16
- Platform:  Mac

ERROR in Symbol SvgIconComponent

ERROR in Symbol SvgIconComponent declared in C:/.../node_modules/@ngneat/svg-icon/lib/svg-icon.component.d.ts is not exported from @ngneat/svg-icon/lib/svg-icons.module

core module:

imports:[
  ...
  SvgIconsModule.forRoot({
      icons
    }),
  ...
],
exports:[
  ...
  SvgIconsModule,
  ...
]

conversionType: "object" option does not work anymore in new library version (2.0.0)

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In my projects I am importing the images as an object with the following config as it is in this article and in the previous docs:

"svg-to-ts": {
    "conversionType": "object",
    "srcFiles": [
      "libs/shared/icons-lib/src/lib/icons/*.svg"
    ],
    "outputDirectory": "libs/shared/icons-lib/src/lib",
    "fileName": "svg-icons",
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }

This generates the following svg-icons.ts file:

/* 🤖 this file was generated by svg-to-ts*/
export default {
  checkmark:
    '<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20zm-1.895-11.667c-.505 0-.992-.234-1.31-.631l-4.788-6.025c-.56-.703-.411-1.695.318-2.236a1.688 1.688 0 012.32.306l3.347 4.24c2.133-3.14 6.453-9.272 9.202-11.87a1.715 1.715 0 012.338.019 1.57 1.57 0 01-.018 2.254c-3.442 3.247-9.95 13.114-10.025 13.204-.28.433-.786.721-1.328.74h-.056z"/></svg>',
  done:
    '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>'

However I then have issues while registering the SVGIconsModule, since the expected icons type is SvgIconType | SvgIconType[] and this brings a breaking change in my current projects:

import { SvgIconsModule } from '@ngneat/svg-icon';
import * as icons from './svg-icons';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    SvgIconsModule.forRoot({
        icons
    })]
})

As a different type is expected:

Type 'typeof import("/Users/.../libs/shared/icons-lib/src/lib/svg-icons")' is not assignable to type 'SvgIconType | SvgIconType[] | undefined'.

Expected behavior

I would like to be able to keep using "conversionType": "object", as until version 1.0.3

Minimal reproduction of the problem with instructions

Create a brand new Angular project with at least one svg icon and set the config as described above, using "conversionType": "object"

What is the motivation / use case for changing the behavior?

It seems to be a breaking change compared to the previous version.

Environment


Angular version: 11.0.0

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [X] Chrome (iOS) version 86.0.4240.183 
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.18.2
- Platform:  Mac

Optimize is not a function

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[X] Documentation issue or request
[X] Support request
[ ] Other... Please describe:

Current behavior

Running through the installation and setup instructions in the Readme and keep running into an error when running the npm run generate-icons script. Here is the error:

/node_modules/@ngneat/svg-generator/tree.js:49
svgContent: (0, svgo_1.optimize)(svgContent, { plugins, path: svgPath }).data,
^

TypeError: (0 , svgo_1.optimize) is not a function

Expected behavior

Expected this to work and actually generate the svg ts files.

Minimal reproduction of the problem with instructions

Created a fresh vanilla Angular application and then ran the ng add @ngneat/svg-icon. New scripts were added in package.json. Double checked against the documentation to make sure they were correct. Ran npm run generate-icons and get the error.

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In angular 13 there is an exception about icon registry: NullInjectorError: R3InjectorError(AuthInfoDetailModule)[SvgIconsModule -> SvgIconRegistry]. Icons are rendered, but exception is thrown in console. It was working with angular v12.

Expected behavior

It should not throw an exception.

Minimal reproduction of the problem with instructions

Upgraded angular 12 project to 13 and updated svg-icons to v3.3.0

What is the motivation / use case for changing the behavior?

Environment


Angular version: 13.0.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.17.6 
- Platform: Mac 

Others:


Full exception:
Uncaught Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]: 
  NullInjectorError: No provider for SvgIconRegistry!
NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]: 
  NullInjectorError: No provider for SvgIconRegistry!
    at NullInjector.get (core.mjs:11139)
    at R3Injector.get (core.mjs:11306)
    at injectInjectorOnly (core.mjs:4774)
    at Module.ɵɵinject (core.mjs:4778)
    at Object.SvgIconsModule_Factory [as factory] (ngneat-svg-icon.js:233)
    at R3Injector.hydrate (core.mjs:11476)
    at R3Injector.get (core.mjs:11295)
    at core.mjs:11333
    at Set.forEach ()
    at R3Injector._resolveInjectorDefTypes (core.mjs:11333)
    at resolvePromise (zone.js:1213)
    at zone.js:1283
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.mjs:25864)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)

---

ngneat-svg-icon.js:233
SvgIconsModule.ɵfac = function SvgIconsModule_Factory(t) { return new (t || SvgIconsModule)(ɵngcc0.ɵɵinject(SVG_ICONS, 10), ɵngcc0.ɵɵinject(SVG_MISSING_ICON_FALLBACK, 8), ɵngcc0.ɵɵinject(SvgIconRegistry)); };

Unit tests fail after updating to v5 and v6

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The app works fine and svg icons are displayed when I serve it or build it,
but when I try to run unit tests of components that use svg-icon it always fails

Expected behavior

Tests should work as before.

Minimal reproduction of the problem with instructions

Create an empty Nx angular project
configure svg-icon
Add a new angular library
add a new component that uses svg-icon
run unit tests for that component

You can check an example here:
tspmelo/ngneat-svg-icon-issue#1

I noticed that unit tests are using fesm2015/ngneat-svg-icon.mjs and if I move the code from line 83 to line 65, tests start working again:

const SVG_ICONS_CONFIG = new InjectionToken('SVG_ICONS_CONFIG', {
    providedIn: 'root',
    factory() {
        return {};
    },
});

SvgIconRegistry.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SvgIconRegistry, deps: [{ token: SVG_ICONS_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
SvgIconRegistry.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SvgIconRegistry, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SvgIconRegistry, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: function () {
        return [{ type: undefined, decorators: [{
                        type: Inject,
                        args: [SVG_ICONS_CONFIG]
                    }] }];
    } });

Environment


Angular version: 15.0.0 (also happens with latest 14.x.x)


For Tooling issues:
- Node version: 16.17.1 and  18.12.0 
- Platform:  Linux 


Others:
- Jest: 28.1.1

Cannot use strings in the @Input key, only SvgIcons type

I'm submitting an issue with the key input of svg-icon component. It does not allow me to use strings, requires a type of SvgIcons to be used. I was using version 4.x.x until now, so I know that it worked back then


[ x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Using strings as inputs in the key input of svg-icons component is not allowed

Expected behavior

Allowing strings to be used in the key input of svg-icons component

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v16.17.0
- Platform:  Mac

Others:

ng-add not installing itself

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Following dependencies added:

    "typescript": "~4.0.2",
    "svg-to-ts": "^5.0.0"

Expected behavior

@ngneat/svg-icon added to package.json

Minimal reproduction of the problem with instructions

ng new svg-test
ng add @ngneat/svg-icon
Check package.json

What is the motivation / use case for changing the behavior?

[Nx Lib] How to generate icons from svgGenerator ?

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

Hi,
Thanks a lot for this great lib !
I would like to use it in a Nx Lib, but I can't figure how to trigger the svgGenerator script in my lib project.json file. I tried to use the @nrwl/workspace:run-commands command but it doesn't work :

"build-icons": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "svgGenerator": {
          "outputPath": "./src/app/svg",
          "prefix": "lib",
          "srcPath": "./src/assets/svg",
          "svgoConfig": {
            "plugins": [
              {
                "removeDimensions": true,
                "cleanupAttrs": true
              }
            ]
          }
        }
      }
    }

running this command : nx run my-nx-lib:build-icons

Have a nice day !
Benoît

Environment


Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

icon is missing when used in nested modules

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If I register an icon within a nested child module using SvgIconsModule.forChild([...]) result will be "missing icon"

Expected behavior

forChild method to work within nearest hierarchy? I expect the icon to be shown but are more interested in an explanation to why this is happening

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/ng-neat-usage-example?file=src/app/app.component.html

What is the motivation / use case for changing the behavior?

Environment


Angular version: 11.0.8


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Icon is not rendered with IE11

Originally posted by @RonnieRocket147 in #6 (comment)

The SVG icons are not displayed in IE11 although the browserlistrc and polyfills.ts are correctly configured. The console shows the error TypeError: Argument not optional and the svg-icon element has no child elements when viewed in the inspector.

What can be done to make it work in IE11?

Many thanks.

Let us define our own preserveAspectRatio for SVGs

I'm submitting a...

Feature Request

Current behavior

The preserveAspectRatio attribute of all SVGs are always overriden to be xMidYMid meet in registry.ts#L45

Expected behavior/Proposed solution

An input on the component to set this attribute would be nice. It could also default to that value this library sets it to so there's no breaking changes.

Minimal reproduction of the problem with instructions

Generate an SVG with a preserveAspectRatio value that is not xMidYMid meet and it will always be set to xMidYMid meet

What is the motivation / use case for changing the behavior?

I'd like to output an SVG with a custom preserveAspectRatio to render it/align it differently but cannot

Audit fails because of an underlying dependency

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

One of the deep dependencies makes npm audit fail in our projects. Please see the screenshot

The dependency name is ini and it's pulled by schematics

Expected behavior

npm audit should not fail

Minimal reproduction of the problem with instructions

Install 3.2.0 version of svg-icon and run npm audit

What is the motivation / use case for changing the behavior?

Our CI is failing because of this and for now we have to remove audit from it, but we would like to keep it in the future.

Environment


Angular CLI: 12.2.1
Node: 14.17.5
Package Manager: npm 6.14.14
OS: darwin x64

Angular: 12.2.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.2.3
@angular-devkit/schematics      8.3.29
@schematics/angular             12.2.1
rxjs                            6.6.7
typescript                      4.3.5


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.17.5  
- Platform: All  

Others:

Generating icons script throws an issue

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Once I tried to run the generate-icons the following error appears in the terminal:


C:\Users\bened\test\node_modules\@ngneat\svg-generator\tree.js:49
                    svgContent: (0, svgo_1.optimize)(svgContent, { plugins, path: svgPath }).data,
                                                    ^

TypeError: (0 , svgo_1.optimize) is not a function
    at createTree (C:\Users\bened\test\node_modules\@ngneat\svg-generator\tree.js:49:53)
    at generateSVGIcons (C:\Users\bened\test\node_modules\@ngneat\svg-generator\generator.js:19:47)
    at Object. (C:\Users\bened\test\node_modules\@ngneat\svg-generator\index.js:9:34)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Expected behavior

Generate icon ts files to the expected folder.

Minimal reproduction of the problem with instructions

Generated a new angular application. Run the following command: ng add @ngneat/svg-icon
it added the following dependencies to the package.json:


{
  "dependencies": {
    "@ngneat/svg-icon": "^4.1.0",
  },
  "devDependencies": {
    "@ngneat/svg-generator": "^2.0.0"
  }
}

What is the motivation / use case for changing the behaviour?

Once I manually upgraded the svg-generator to version 4.0.0 the problem disappeared. Shouldn't the schematic install the 4.0.0 by default?

Environment


Angular version: 13.3.0

 
For Tooling issues:
- Node version: v16.14.2  
- Platform:  Windows

Others:
- Npm version: 8.5.5

Support of non-square svg's

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Icons must have the same height and width. I would like the ability to support non square icons by adding a property to overwrite the existing functionality setting height and weight to be 1em, with the values from the input properties

What is the motivation / use case for changing the behavior?

In our set of icons we have a few that are not square and would be nice to be able to use this library. I am willing to submit a PR if this is something you would be interested in including in your package. I am also open to other suggested solutions.

[Feature Request] Generate standalone IconComponent per icon type

<!-

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

One single IconComponent with support for icon types

Expected behavior

Multiple IconComponents, declared as standalone. They will not have input iconType, but will directly use SVG.
As they will be declared as standalone, it will be a tree shakable solution as well

Error on server when using Server Side Rendering

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When using svg-icon library on a server side rendered app, error gets printed to the console.
ERROR ReferenceError: document is not defined at SvgIconRegistry.toElement (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:2685105) at SvgIconRegistry.addAttributes (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:2684812) at SvgIconRegistry.get (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:2684394) at svg_icon_component_SvgIconComponent.render (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:2687024) at svg_icon_component_SvgIconComponent.ngOnInit (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:2686268) at callHook (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:1878477) at callHooks (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:1878133) at executeInitAndCheckHooks (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:1877506) at selectIndexInternal (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:1913286) at ɵɵadvance (/Users/florian.bastianelli/Documents/GitHub/website-v3/dist/server/main.js:1:1912781)

Expected behavior

svg-icon should only render elements on Browser side, when DOM is accessible.

Minimal reproduction of the problem with instructions

Setup and use a universal angular app.
Add on svg-icon library an duse it in a component
Build app for SSR
Run app for SSR check server logs

What is the motivation / use case for changing the behavior?

Be nice to have it running smoothly even when using SSR

document is not defined when using Angular Universal

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

ERROR ReferenceError: document is not defined

 
    toElement(content) {
        const div = document.createElement('DIV');
        div.innerHTML = content;
        const svgElement = div.querySelector('svg');
        if (!svgElement) {
            throw Error(' tag not found');
        }
        return svgElement;
    }

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Support Angular Universal

Environment


Angular version: 10.1.6


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Add support for getting the raw svg data url

Add an option to get the SVG ready for use with <img src="">. (data:image/svg+xml;charset=utf-8,${encoded svg})`. We can expose both from a pipe and the service.

Is the package schematics-utilities really a dependency or rather a dev-dependency?

I'm submitting a ---


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X ] Support request
[ ] Other... Please describe:

Question

Schematics-utilities is added as normal dependency but sounds like a dev dependency to me. Problem for my personal project is that schematics-utilities themself have an outdated @angular-devkit/core dependency.

Add support for stroke color

Currently, we support the fill attribute. Add a global and inline option to choose the stroke variation and add the style based on it.

Support ARIA attributes on SVGs

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I did not find a way to set ARIA attributes like aria-hidden or aria-label on the SVG element.

Expected behavior

I am able to set those attributes via the directive. Best would be to set aria-hidden by default and remove it if a label is supplied via an input. This is also the default behavior of Angular Material.

What is the motivation / use case for changing the behavior?

This would greatly help us improve the accessibility of our site.

Environment


Angular version: 11.1.1

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

@ngneat/svg-generator throws error and cannot find module 'svgo'

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

After following the installation steps from the README.md, I started using @ngneat/svg-generator via npm script command"svg": "svg-generator". I faced the following error (attached screenshot) in the terminal.

After installing svgo as a devDependency, the issue has gone

Expected behavior

No issues during the process of using @ngneat/svg-generator. svgo installs within the package

Minimal reproduction of the problem with instructions

Generate a new Angular application. Run the following commands:

yarn add @ngneat/svg-icon
yarn add @ngneat/svg-generator -D

The previous commands added the following dependencies to the package.json

{
  "dependencies": {
    "@ngneat/svg-icon": "^7.0.0",
  },
  "devDependencies": {
    "@ngneat/svg-generator": "^7.0.0",
  }
}

What is the motivation / use case for changing the behavior?

It will be great not to face the issue and get all the dependencies within the package (i.e. npm i | yarn add).

Environment


Angular version: 16.1.0


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.20.1
- Platform: Mac

Others:
- Package manager: yarn
- yarn version: 1.22.0

ng-add svg-icons file not exists

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

ng-add adds

import icons from '../assets/svg/svg-icons';

to app.module.ts, but this assets/svg/svg-icons not exists.
What this file supposed to be?

According to README manual steps looks like I need to import each icon?

import { appSettings } from '../svg/app-settings.icon';

@NgModule({
  imports: [
    SvgIconsModule.forRoot({
      icons: [appSettings]
    })
...

An unhandled exception occurred: Cannot find module 'bluebird'

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Running the command npx ng add @ngneat/svg-icon fails to install svg-icon, and throws the following error

 
The package @ngneat/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
An unhandled exception occurred: Cannot find module 'bluebird'
Require stack:
- /node_modules/@schematics/update/node_modules/pacote/extract.js
- /node_modules/@schematics/update/node_modules/pacote/index.js
- /node_modules/@schematics/update/update/npm.js
- /node_modules/schematics-utilities/dist/package_update/npm.js
- /node_modules/schematics-utilities/dist/package_update/index.js
- /node_modules/schematics-utilities/dist/index.js
- /node_modules/@ngneat/svg-icon/schematics/src/ng-add/index.js
- /node_modules/@angular-devkit/schematics/tools/export-ref.js
- /node_modules/@angular-devkit/schematics/tools/index.js
- /node_modules/@angular/cli/utilities/json-schema.js
- /node_modules/@angular/cli/models/command-runner.js
- /node_modules/@angular/cli/lib/cli/index.js
-/node_modules/@angular/cli/lib/init.js
- /node_modules/@angular/cli/bin/ng
See "/private/var/folders/m2/0bn_68yn0m327y4qw9ggj5c80000gp/T/ng-0gUstZ/angular-errors.log" for further details.

Expected behavior

The command should install this package.

Minimal reproduction of the problem with instructions

npx ng g application test-app
npx ng add @ngneat/svg-icon

Installing the bluebird package globally will make this command work again.

What is the motivation / use case for changing the behavior?

This command should work.

Environment


Angular version: X.Y.Z


 
For Tooling issues:
- Node version: 16
- Platform:  Mac

Others:

Strictly-type generated files

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Icon types are not generated.

Expected behavior

Having the ability to get the names from the objects.

Minimal reproduction of the problem with instructions

const icons = [app1Icon, app2Icon];

type IconNames = (typeof icons[number])['name'];

IconNames is a string instead of array of const strings ('icon1' | 'icon2').

What is the motivation / use case for changing the behavior?

Using a wrapper component you can strictly type the icons. This means intellisense help, also.

To achieve this you need to wrap the original component.

Solution:

Strictly-type the name in the generated files:

const icon: {data: string; name: 'icontype'} = {
  data: '...',
  name: 'icontype',
}

How it differs from Angular Material Icon Registration?

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[x] Other... Please describe:

What is the motivation / use case for changing the behavior?

I am using angular material. We can also register icon using material icons (I haven't done it yet, just read the documentation). Should I go with this library or register via angular material? Has anybody worked with either of them? what are the pros and cons?

Conflict involving icons that share the same name but have different paths (solid/outline).

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I have come across a conflict related to registering icons that share the same name but have different paths, such as "arrowUp" from the "solid" and "outline" directories. The issue arises when the registration process checks if the name already exists.

  register(icons: SvgIconType | SvgIconType[]) {
    for (const { name, data } of Array.isArray(icons) ? icons : [icons]) {
      if (!this.svgMap.has(name)) {
        this.svgMap.set(**name**, new SvgIcon(data));
      }
    }
  }

Expected behavior

should be able to handle icons with the same name but different paths in a way that allows both versions to coexist.
Resolution Suggestions:
add the possibility to add prefix / postfix to icon output name when generation

export interface Config {
  srcPath: string;
  outputPath: string;
  svgoConfig: { plugins: any[] };
  prefix?: string;
  postfix?: string;
  rootBarrelFile?: boolean;
  rootBarrelFileName?: string;
  iconExportedNamePrefix?: string;
  iconExportedNamePostfix?: string;
}

export const arrowUpIcon = {
    data: `...`,
    name: 'arrow-up' as const
};

will be

export const arrowUpIcon = {
    data: `...`,
    name: 'arrow-up-**solid**' as const
};

Minimal reproduction of the problem with instructions

Register icons with the same name but different paths, such as "arrowUp" from both the "solid" and "outline" directories.

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  
Mac
Others:

ngneat / svg-icon Goto Github PK

svg-icon's People

Contributors

Stargazers

Watchers

Forkers

svg-icon's Issues

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

Expected behavior

Environment

I'm submitting a...

Feature description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

What is the motivation / use case for changing the behavior?

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting an issue in my current project which causes my builds to fail when using svg-icon library. This is due to added dependency of schematics-utilities that is causing my @angular-devkit/schematics to install an older version which schematics-utilities is referencing.

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation/use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

I'm submitting a...

Current behavior

I'm submitting a...

Current behavior

I'm submitting a...

Current behavior

Expected behavior

Minimal repoduction