Export Svg from Angular Library

user_3241192 0
Viewed 848

I am creating a design library, and would like to include some basic SVG to it, so that if user do not add/override they will still be displayed as backup.

I created a folder in my library

assets/
 => svg/
   => alert.svg
   => success.svg
   => trash.svg
   => ...

I then added this folder to ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/ui",
  "assets": ["src/assets"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}

then I would like to load those svg in my library, so in my module folder I do :

constructor(private iconReg: SvgIconRegistryService) {
    Object.entries({
        alert: 'assets/svg/alert.svg',
        info: 'assets/svg/info.svg',
        success: 'assets/svg/success.svg',
        warning: 'assets/svg/warning.svg',
    }).forEach(([key, value]) => {
        this.iconReg.loadSvg(value, key)?.subscribe();
    });
}

Sadly, the src are not found when the library is used :

message: "Http failure response for http://localhost:4200/assets/svg/success.svg: 404 Not Found" name: "HttpErrorResponse"

angular-library angular svg shared-libraries
3 Answers

First of all in your ng-package.josn export assets like below:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/ui",
  "assets": ["./assets"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}
  • tsconfig.lib.json path do not work in angular libraries, so after your change you may have to edit manually the import of the assets with relative path.

Now run ng build custom-project --prod. It then appear in your dist folder.

Then, Add those files into your angular.json file:

{
  "assets": [
    {
      "glob": "**/*",
      "input": "./node_modules/your-project/assets",
      "output": "/assets/"
    }
  ],
  "styles" : [
    "node_modules/your-project/assets/css-file.css"
  ],
  "scripts" : [
    "node_modules/your-project/assets/js-file.js"
  ]
}
user_114343730

One alternative I can suggest is instead of exporting files, you could just create one component. In html part you could place svg file content and access them using input parameter. May be by passing svg name you could access them. Even other style parameters to svg can be kept as input to the component.

user_81411160

i suggest you to create a html and component and css file.then copy your svg in html file with svg tag then put the svg css in css file and import the css in your component.

user_106220990
Related