search

hughjdavey / ngx-stars

Simple stars rating component for Angular >= 2
Creative Commons Zero v1.0 Universal
18 stars 9 forks source link

Custom icons don't work for me... #15

Open kacan98 opened 12 months ago

kacan98 commented 12 months ago

I am trying to change to custom icons. I tired many different ways to pass the icons to the customStarIcons input and it does not work for me:

scr/app/app.component.html:

  <ngx-stars color="white" [customStarIcons]="iconUrls"></ngx-stars>  <!-- This exists in the dom, but no icons shown -->
  <ngx-stars></ngx-stars>  <!-- this displays -->
  <img src="../assets/star-outline.svg" alt="hello"> <!-- this displays -->

scr/app/app.component.ts:

export class AppComponent implements OnInit {
  iconUrls = {
    empty: '../assets/star-outline.svg',
    half: '../assets/star-half.svg',
    full: '../assets/star.svg',
  };
  ...}

scr/app/app.module.ts:


  @NgModule({
  declarations: [AppComponent],
  imports: [
...
    NgxStarsModule,

And these exist:

scr/assets/icon.svg
scr/assets/icon-outline.svg
scr/assets/icon.svg

Could be useful to see the source code for the demo page :)

hughjdavey commented 12 months ago

Hi @kacan98 thanks for raising the issue. I will look into this soon but in the meantime, the relevant sections of source code are

app.component.html

...
<h2>Customize icons</h2>
<h6>Following icons sourced from <a href="http://www.onlinewebfonts.com/icon">Icon Fonts</a> and licensed by CC BY 3.0</h6>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="1.5" [customStarIcons]="curvyStarUrls"></ngx-stars>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="2.5" [customStarIcons]="heartUrls"></ngx-stars>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="3.5" [customStarIcons]="circleUrls"></ngx-stars>
...

app.component.ts

export class AppComponent {
  ...
  curvyStarUrls = {
    empty: '../assets/curvy-star-empty.svg',
    half: '../assets/curvy-star-half.svg',
    full: '../assets/curvy-star-full.svg',
  };

  heartUrls = {
    empty: '../assets/heart-empty.svg',
    half: '../assets/heart-half.svg',
    full: '../assets/heart-full.svg',
  };

  circleUrls = {
    empty: '../assets/circle-empty.svg',
    half: '../assets/circle-half.svg',
    full: '../assets/circle-full.svg',
  };
  ...
}

The app structure showing the assets folder looks like image

hughjdavey commented 12 months ago

All the code you posted looks fine so I don't have an immediate theory as to what the issue is. Is it possible to put up an example of it not working on a branch I could check out or something? I am assuming "src/assets" is listed under assets in your angular.json? Is there anything in the console when they fail to load? And does anything get displayed on the page?

hughjdavey commented 12 months ago

Actually I have just noticed in your example, the names in your ts file (star-outline.svg, star-half.svg and star.svg) do not match the names in your assets folder (icon.svg and icon-outline.svg) - could this be it?

hughjdavey commented 11 months ago

Hi did you ever get this working?