avmaisak / ngx-bootstrap-icons Goto Github PK

Hello there.
I just updated NGXBootstrapIcons.

First thing I should say is that as of the lib was built, it was wery difficult to correctly mantain all the imports.
Now by changing to .pick() to .forRoot() it messed up the entire project I was working on.

I followed the instructions and I imported the lib in AppModule with .forRoot(allIcons) and I imported the lib without .forRoot() in the other modules where it needs the component.

Unfortunately I receive this error:

This is where I put the library:

As you can see it should be fine, as the new guide described it.
I don't know why the behaviour is like this.

https://github.com/twbs/icons/releases/tag/v1.2.2

How to use these icons in CSS?

Hi, thank you so so much for this library, it's just what I needed.

I was wondering if it would be possible to somehow make it so that one can register icons in the app.module i.e.

import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';

import { Alarm, AlarmFill } from 'ngx-bootstrap-icons';

const icons = {
  Alarm,
  AlarmFill
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxBootstrapIconsModule.forRoot(icons)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and then

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';

@NgModule({
  declarations: [NavigationComponent ],
  imports: [
    CommonModule,
    NgxBootstrapIconsModule.forChild(), // Inherit icons from root component  / global store ?
  ],
  exports: [
   NavigationComponent
  ],
})
export class NavigationModule {

}
 

That way one can register icons once in the root, and then just import NgxBootstrapIconsModule.forChild() in child modules to use the tag/component.

I would be willing to give it a try myself and submit a pull request?

I was trying to understand why the size of the generated bundle is so big, so I ran the webpack-bundle-analyzer tool on a project that looks like this.

import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';
import { arrowDown } from 'ngx-bootstrap-icons';

const icons = {
    arrowDown,
};

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        NgxBootstrapIconsModule.pick(icons),
        ...
    ],
})
export class AppModule {
}

To run the bundle analyzer, I ran the following in my project's directory:

npm install --save-dev webpack-bundle-analyzer
ng build --stats-json
node_modules/.bin/webpack-bundle-analyzer dist/labeler/stats.json

This opens a browser window showing the sizes of the various modules in my app. The size of the ngx-bootstrap-icons.js is the same whether I pick(icons) or I import allIcons and then pick(allIcons), and is 1.23MB parsed size.

This happens on Angular 12.

Any thoughts on what's going on?

Hi, I just wanted to make this issue to display an optional feature.

I would like to make a pull request to add optional enum support for the icon names, basically this will allow users to auto-complete the icon names instead of having to remember strings, the usual string support will still be supported as well, see the sample image below on how it will look

Angular is warning me that the library is using commonjs, I don't know if it will be possible to use esm instead, I haven't narrowed down the problem either but I thought I'd make an issue about it, I can look into it for you if you want, in terms of how much work it might take.

Warning: /home/tayamba/Repositories/web-app-merchants/apps/template-app/client/src/app/app.module.ts depends on 'ngx-bootstrap-icons'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

https://github.com/twbs/icons/releases

I think this is the only place it's used.

replacing it with

import * as camelCase from 'lodash.camelcase';

And updating the peer dependancies package.json would make ng build happy & build size smaller

Enum name must match one of the following formats: PascalCaseeslint@typescript-eslint/naming-convention

Is there a way to resize icons from the angular module?

Hi, I'm getting a lot of conflicts/red lines from eslint rules that are not really being used, and so can be removed.

e.g. for private variables, eslint says they must have a leading _

e.g. it complains about

  constructor(private icons: object) { }

and basically wants

  constructor(private _icons: object) { }

I've been using version 1.2x before, and I can style icon size directly in css using 'font-size', but not now when I using the latest version. Is it intended or a bug? I'm missing the feature that can style directly in css.

Not sure why but when trying to use this package I got this error when trying to ng serve an Angular project:

An unhandled exception occurred: The target entry-point "ngx-bootstrap-icons" has missing dependencies:
 - lodash.camelcase

I deleted package.json, node_modules, and my cache, then tried installing everything again but got same error. I ended up just installing the package it asked for then it worked.

npm i lodash.camelcase

https://github.com/twbs/icons/releases/tag/v1.1.0

Hi everyone,

I noticed that the demo search isn't working on Firefox.

I'm running Firefox 94.0 and it seems like it's working on Chrome-based browsers.

This is for an optional feature that can be supported because of Angulars 'fullTemplateTypeCheck' mode, which provides enhanced autocomplete features for type safety in the html templates.

Earlier I submitted an issue for using optional Enums, which were helpful in narrowing down what options where available and avoiding typos, the downside is that one would have to import the enums and assign them to a variable to make use of them

i.e

iconEnums = IconEnums

My proposal is to add support for a custom IconName Type

i.e

export type IconName

and allow it as an optional input type.

The benefit will be that the user will not need to import and assign anything anymore, angular language service should autocomplete from a list of specified strings if fullTemplateTypeCheck is enabled.

By adding this feature as an option, current users will not need to do any migration work.

I am willing to do the pull request for this.

linked to #46

Because of my lack of understanding with the dependency injection system, I thought this was the way to go, but after further research I've found another way that is already supported by the current version.

How to achieve the desired functionality of one set of Global icons:

Import NgxBootstrapIconsModule.pick(icons) inside of the AppModule
Import NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.
Now I can import icons in one place only (root module) and successfully use the component anywhere I want.

I can confirm that this works with both eager and lazyloaded modules.

modify generator.
add comment to icon with link to official site

/*
 * AlarmFill icon.
 * https://icons.getbootstrap.com/icons/alarm-fill/
*/
export const AlarmFill = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
</svg>`;

When I try to import AlertCircle as shown in the readme:

import { Alarm, AlarmFill, AlertCircle } from 'ngx-bootstrap-icons';
// Select some icons (use an object, not an array)
const icons = {
  Alarm,
  AlarmFill,
  AlertCircle
};

I get an error message

All imports in import declaration are unused.ts(6192)
'AlertCircle' is defined but never used.eslint@typescript-eslint/no-unused-vars
Module '"../../../../../../../../node_modules/ngx-bootstrap-icons/ngx-bootstrap-icons"' has no exported member

The others work.

Wondering if there are any plans to update to include the new icons released in v1.10.0 https://blog.getbootstrap.com//2022/11/11/bootstrap-icons-1-10-0/ . Btw, great project, thanks!

Hello,

Are there plans to update this package to the latest version of BS icons? Looks like 1.11.1 is the latest.

Thanks

This is not working when the dimensions are removed. Neither width/height or font-size is working.

But when dimension is set using "em", it works using font-size.

And I've checked out the official bootstrap icon library, all of their icons have the dimensions of "16" without any unit. So if it's impossible/too many works to make it using "1em", then I will just style them directly in HTML.

Originally posted by @erqk in #182 (comment)

In next release Add changelog in library scope