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",