Possibility to use own svg

[willmendesneto]

Possibility to use own svg

[willmendesneto]

Hi @lmarquinez 👋

Thanks for raising this issue. ngx-skeleton-loader already supports it 🎉

What you need to do on your end is use appearance="custom-content" and add your content inside the component.

Live Demo: https://stackblitz.com/edit/ngx-skeleton-custom-content-sample?file=src%2Fapp%2Fapp.component.html

Readme.md documentation: https://github.com/willmendesneto/ngx-skeleton-loader?tab=readme-ov-file#options

<div class="item">
  <div style="width: 50%">
    <ngx-skeleton-loader
      appearance="custom-content"
      [theme]="{ height: '250px' }"
    >
      <svg viewBox="0 0 312 103" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="312" height="102" fill="white" />
        <path
          d="M14 49.5338C5.2 43.5338 1 47.3671 0 50.0338V102.034H312V44.5338C312 35.7338 303.667 37.8671 299.5 40.0338C292.167 44.5338 276.3 54.4338 271.5 58.0338C266.7 61.6338 261.833 62.2005 260 62.0338H248C243.2 62.0338 240 60.7005 239 60.0338C237.833 59.2005 233.5 56.0338 225.5 50.0338C217.5 44.0338 210.167 47.2004 207.5 49.5338C204.833 51.8671 197.6 58.0338 190 64.0338C182.4 70.0338 176.833 65.2005 175 62.0338C168.167 48.3671 153.5 19.3338 149.5 12.5338C144.7 6.13377 138.5 9.8671 136 12.5338C130.667 18.3671 118.8 31.3338 114 36.5338C109.2 41.7338 102.667 42.3671 100 42.0338H76C66.5 42.0338 48 56.5338 42 59.0338C37.2 61.0338 32.3333 59.8671 30.5 59.0338C28.6667 58.3671 22.8 55.5338 14 49.5338Z"
          fill="#EFEFEF"
        />
        <path
          d="M14 49.5338C5.2 43.5338 1 47.3671 0 50.0338V102.034H312V44.5338C312 35.7338 303.667 37.8671 299.5 40.0338C292.167 44.5338 276.3 54.4338 271.5 58.0338C266.7 61.6338 261.833 62.2005 260 62.0338H248C243.2 62.0338 240 60.7005 239 60.0338C237.833 59.2005 233.5 56.0338 225.5 50.0338C217.5 44.0338 210.167 47.2004 207.5 49.5338C204.833 51.8671 197.6 58.0338 190 64.0338C182.4 70.0338 176.833 65.2005 175 62.0338C168.167 48.3671 153.5 19.3338 149.5 12.5338C144.7 6.13377 138.5 9.8671 136 12.5338C130.667 18.3671 118.8 31.3338 114 36.5338C109.2 41.7338 102.667 42.3671 100 42.0338H76C66.5 42.0338 48 56.5338 42 59.0338C37.2 61.0338 32.3333 59.8671 30.5 59.0338C28.6667 58.3671 22.8 55.5338 14 49.5338Z"
          fill="black"
          fill-opacity="0.1"
        />
      </svg>
    </ngx-skeleton-loader>
  </div>
</div>

---

Nothing needs to be done here 💯 Once again, thanks for raising that and to use ngx-skeleton-loader module!