@helsevestikt/hviktor-icons 0.0.47 → 0.0.51

package/README.md

@@ -1,60 +1,35 @@
 # Hviktor Icons
 
-A collection of **900+ icons** as pure **Web Components** that work in any framework - Angular, React, Vue, Blazor, or vanilla JavaScript.
+En samling med 900+ ikoner som rene Web Components som fungerer i alle rammeverk: Angular, React, Vue, Blazor eller vanilla JavaScript.
 
-## Installation
+## Installasjon
 
 ```bash
 npm install @helsevestikt/hviktor-icons
 ```
 
-## Features
+## Funksjoner
 
-- ✅ **900+ icons** based on NAV Aksel design system
-- ✅ **Pure Web Components** - no framework dependencies
-- ✅ **Works everywhere** - Angular, React, Vue, Blazor, vanilla JS
-- ✅ **Three sizes**: `sm` (16px), `md` (24px), `lg` (32px)
-- ✅ **Customizable** via CSS `color` property
-- ✅ **Full TypeScript support** with IntelliSense
-- ✅ **Tiny bundle** - no framework overhead
+- 900+ ikoner basert på NAV Aksel
+- Rene Web Components (ingen avhengighet til rammeverk)
+- Fungerer i Angular, React, Vue, Blazor og vanilla JS
+- Tre innebygde størrelser: `sm` (16px), `md` (24px), `lg` (32px)
+- Arver farge gjennom `currentColor`
+- TypeScript typinger + `custom-elements.json`
 
-## TypeScript typings and metadata
+## Bruk
 
-The package publishes both:
-
-- `dist/lib/icons.d.ts` (configured via the `types` field in `package.json`)
-- `dist/custom-elements.json`
-
-This gives strong IntelliSense across editors and frameworks for:
-
-- custom element tags (`hvi-icon-*`)
-- attributes/properties (`size`)
-- typed custom event `hvi-size-change`
-
-TypeScript example:
-
-```ts
-const icon = document.createElement('hvi-icon-airplane');
-icon.size = 'lg';
-icon.addEventListener('hvi-size-change', (event) => {
-  console.log(event.detail.previousSize, event.detail.size);
-});
-```
-
-## Quick Start
+Du kan enten laste inn hele kodepakken (900+ ikoner), eller hente inn kun de ikonene du skal bruke i løsningen. Ikonene følger automatisk tekstfargen på siden, så de tilpasser seg for eksempel fargen i en knapp.
 
 ### Angular
 
-```typescript
-// app.config.ts or main.ts
+```ts
+// Importerer hele ikon-biblioteket:
 import '@helsevestikt/hviktor-icons';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+// eller importer ett og ett ikon:
+import '@helsevestikt/hviktor-icons/icon-airplane.webcomponent';
+import '@helsevestikt/hviktor-icons/icon-person.webcomponent';
 
-export const appConfig = {
-  // Add schema to allow custom elements
-};
-
-// In component
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @Component({
@@ -63,276 +38,55 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   template: `
     <hvi-icon-airplane size="lg"></hvi-icon-airplane>
     <hvi-icon-person size="md"></hvi-icon-person>
-    <hvi-icon-house size="sm"></hvi-icon-house>
   `,
 })
 export class AppComponent {}
 ```
 
-### React
-
-```jsx
-import '@helsevestikt/hviktor-icons';
-
-function App() {
-  return (
-    <>
-      <hvi-icon-airplane size="lg"></hvi-icon-airplane>
-      <hvi-icon-person size="md"></hvi-icon-person>
-    </>
-  );
-}
-```
-
-### Vue
-
-```vue
-<template>
-  <hvi-icon-airplane size="lg"></hvi-icon-airplane>
-  <hvi-icon-person size="md"></hvi-icon-person>
-</template>
-
-<script>
-import '@helsevestikt/hviktor-icons';
-</script>
-```
-
-### Blazor
+### Blazor / vanlig HTML
 
 ```html
-<!-- In _Host.cshtml, _Layout.cshtml, or index.html -->
 <script type="module">
   import '@helsevestikt/hviktor-icons';
 </script>
 
-<!-- Then in your Razor components -->
 <hvi-icon-airplane size="lg"></hvi-icon-airplane>
+<hvi-icon-person size="md"></hvi-icon-person>
 ```
 
-  <h1>Dashboard</h1>
-</div>
-
-<hvi-icon-checkmark-circle size="md"></hvi-icon-checkmark-circle>
-<hvi-icon-exclamationmark-triangle size="md"></hvi-icon-exclamationmark-triangle>
-
-<style>
-  hvi-icon-house {
-    color: #0078d4;
-  }
+## Størrelse
 
-  hvi-icon-checkmark-circle {
-    color: #107c10;
-  }
+Tre forhåndsdefinerte størrelser er tilgjengelige via `size`-attributtet:
 
-  hvi-icon-exclamationmark-triangle {
-    color: #d83b01;
-  }
-</style>
-
-````
-
-#### Vanilla JavaScript / HTML
+- `size="sm"` - 16px
+- `size="md"` - 24px (standard)
+- `size="lg"` - 32px
 
 ```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="path/to/hviktor-icons.js"></script>
-  </head>
-  <body>
-    <hvi-icon-person size="md"></hvi-icon-person>
-    <hvi-icon-house size="lg"></hvi-icon-house>
-
-    <script>
-      HvictorIcons.register();
-    </script>
-  </body>
-</html>
-````
-
-## Available Icons
+<hvi-icon-checkmark size="sm"></hvi-icon-checkmark>
+<hvi-icon-checkmark size="md"></hvi-icon-checkmark>
+<hvi-icon-checkmark size="lg"></hvi-icon-checkmark>
+```
 
-All **947 icons** from [NAV Aksel](https://aksel.nav.no/komponenter/ikoner) are available. Icon names follow the pattern `hvi-icon-{name}`.
+## Tilgjengelige ikoner
 
-### Icon Categories
+Alle ikoner fra NAV Aksel er tilgjengelige med navnmønsteret:
 
-- **Accessibility** (12 icons): braille, wheelchair, hearing-loop, etc.
-- **Arrows** (52 icons): arrow-up, arrow-down, chevron-right, caret-left, etc.
-- **Development** (20 icons): code, terminal, database, cloud, etc.
-- **Files and application** (48 icons): file-pdf, folder, download, upload, etc.
-- **Home** (46 icons): house, bed, calculator, book, etc.
-- **Interface** (92 icons): chat, search, settings, trash, pencil, etc.
-- **Law and security** (21 icons): shield, lock, gavel, passport, etc.
-- **Media** (25 icons): play, pause, video, microphone, speaker, etc.
-- **Money** (12 icons): wallet, card, receipt, piggybank, etc.
-- **Nature and animals** (25 icons): sun, moon, flower, mountain, etc.
-- **People** (38 icons): person, person-group, handshake, eye, etc.
-- **Statistics and math** (28 icons): bar-chart, pie-chart, line-graph, etc.
-- **Status** (36 icons): checkmark, x-mark, information, warning, etc.
-- **Transportation** (21 icons): car, bus, train, airplane, bicycle, etc.
-- **Wellness** (24 icons): first-aid, hospital, pill, stethoscope, etc.
-- **Workplace** (24 icons): briefcase, buildings, door, meeting, etc.
+- `hvi-icon-{name}`
 
-### Example Icon Names
+Eksempler:
 
 ```html
 <hvi-icon-checkmark size="md"></hvi-icon-checkmark>
 <hvi-icon-x-mark size="md"></hvi-icon-x-mark>
-<hvi-icon-information size="md"></hvi-icon-information>
-<hvi-icon-exclamationmark-triangle size="md"></hvi-icon-exclamationmark-triangle>
 <hvi-icon-chevron-down size="sm"></hvi-icon-chevron-down>
-<hvi-icon-chevron-up size="sm"></hvi-icon-chevron-up>
 <hvi-icon-person size="lg"></hvi-icon-person>
-<hvi-icon-file-pdf size="md"></hvi-icon-file-pdf>
-<hvi-icon-trash size="sm"></hvi-icon-trash>
-```
-
-Browse all icons at: https://aksel.nav.no/komponenter/ikoner
-
-## Building
-
-### Build the Angular Library
-
-To build the library for npm distribution:
-This section is for contributors developing the icon library itself.
-
-### Project Structure
-
-```
-projects/icons/
-├── src/
-│   ├── lib/
-│   │   ├── icons/           # 947 icon components
-│   │   ├── base-icon.component.ts
-│   │   └── register-elements.ts  # Auto-generated
-│   └── public-api.ts        # Auto-generated exports
-├── BLAZOR_GUIDE.md
-├── IMPORT_NAV_ICONS.md
-└── README.md
 ```
 
-### Adding New Icons
-
-To import additional icons from NAV Aksel:
-
-```bash
-# Download and extract icons
-Invoke-WebRequest -Uri "https://cdn.nav.no/aksel/icons/zip/aksel-icons.zip" -OutFile "aksel-icons.zip"
-Expand-Archive -Path aksel-icons.zip -DestinationPath temp/aksel-icons
-
-# Flatten to single directory
-mkdir temp/all-icons
-Get-ChildItem -Path "temp/aksel-icons" -Recurse -Filter "*.svg" | Copy-Item -Destination "temp/all-icons"
-
-# Import all icons
-npm run import:nav-icons temp/all-icons
-
-# Generate register-elements.ts
-npm run generate:register
-
-# Build and test
-npm run build:icons:bundle
-```
-
-See [IMPORT_NAV_ICONS.md](./IMPORT_NAV_ICONS.md) for detailed instructions.
-This creates the library in `dist/icons/` with all necessary files for npm.
-
-### Build the Web Components Bundle
-
-To create the standalone Web Components bundle for Blazor and other frameworks:
-
-```bash
-npm run build:icons:bundle
-```
-
-use `currentColor` for the fill, so they inherit the text color. You can style them using CSS:
-
-```css
-/* Change color */
-.success-icon {
-  color: #107c10; /* Green */
-}
-
-.error-icon {
-  color: #d83b01; /* Red */
-}
-
-.info-icon {
-  color: #0078d4; /* Blue */
-}
-
-/* Icons automatically adjust to font-size if not using size attribute */
-.large-icon {
-  font-size: 48px;
-}
-```
-
-## Icon Sizes
-
-Three predefined sizes are available via the `size` attribute:
-
-- `size="sm"` - 16px (small)
-- `size="md"` - 24px (medium, default)
-- `size="lg"` - 32px (large)
-
-````html
-<hvi-icon-checkmark size="sm"></hvi-icon-checkmark>
-<hvi-icon-checkmark size="md"></hvi-icon-checkmark>
-<hvi-icon-checkmark size="lg"></hvi-icon-checkmark>
-```bash npm run publish:icons
-````
-
-This will:
-
-1. Bump the patch version
-2. Build the Angular library
-3. Build the Web Components bundle
-4. Publish to npm
-
-## Development
-
-### Adding New Icons
-
-1. Create a new component in `projects/icons/src/lib/icons/`
-2. Export it from `public-api.ts`
-3. Register it in `register-elements.ts`
-
-### Running Tests
-
-```bash
-ng test icons
-```
-
-## Styling
-
-Icons inherit the current text color via `currentColor`. You can style them using CSS:
-
-```css
-.my-icon {
-  color: blue;
-  font-size: 24px; /* For custom sizes */
-}
-```
-
-## Browser Support
-
-- Modern browsers with Web Components support (Chrome, Firefox, Safari, Edge)
-- Polyfills may be needed for older browsers
-
-## License
-
-See the LICENSE file in the repository.
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
+Se alle tilgjengelige ikoner på NAV Aksel:
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+- https://aksel.nav.no/komponenter/ikoner
 
-## Additional Resources
+## Lisens
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT