SVG files are not loaded in Angular storybook

66 views Asked by At

Seems like icons are undefined, because of wrong call.

Our story

const Template: Story<IconComponent> = (args: IconComponent) => ({
    props: args,
    template: `
    <app-icon [icon]="ICON.CHECK" [type]="ICON_TYPE.WHITE" width="12" height="12"></app-icon>
  `
});

In simple usage (in components) it works correctly, no error appears. This issue happens only in storybook.

this is template of app-icon:

<svg-icon
            class="{{ classes }}"
            src="/assets/icons/{{ icon }}.svg"
            [class.opacity-50]="disabled"
            [class.!stroke-current]="strokeCurrent"
            [svgStyle]="styles"
            [applyClass]="true"
            [ngStyle]="wrapperStyles"
            (click)="!disabled && clickHandler.emit($event)"
        ></svg-icon>

we get icon as input

this is my main.js

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    framework: '@storybook/angular',
    core: {
        builder: 'webpack5'
    }
};

storybook version: "@nrwl/storybook": "15.9.2",

wrong path

0

There are 0 answers