Supernova is an open source design system developed by [SuperAnnotate](https://superannotate.com).\ This library contains a rich set of native Angular UI components developed using Supernova Design System.
npm install @superannotate/supernovanpm install @superannotate/supernova --save.scss
@import '~@superannotate/supernova/assets/styles';
`
Import the component modules you want to use in your app.module.ts file:
`typescript
import { AvatarModule, SidebarModule, ButtonModule } from '@superannotate/supernova'; @NgModule({
imports: [
AvatarModule,
SidebarModule,
ButtonModule
]
})
export class AppModule {}
`
Add import style in your project's angular.json under build -> options -> assets:
`json
{
"glob": "*/",
"input": "./node_modules/@superannotate/supernova/assets",
"output": "/assets/"
}
`
Use the components:
`angular2html
`Development
Supernova is written as an Angular library.
It uses Storybook to showcase its UI components.`
git clone https://github.com/superannotateai/supernova.git
npm install
npm run storybook
``_NOTE:_ Notice we are using just the icon name(id) to reference it in all our components.
This works because we generate a sprite on every build consisting of svg files listed in source icons.
If you want to change/remove an icon or add your own icons, just do it in source icons, and run storybook again:
this will generate a new sprite.svg file and the icon's id would be the name you gave to your new file.