@lansforsakringar/icons 4.11.0 → 4.12.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog icons
+
+## 4.12.0
+
+### Added
+
+- person-already-moved 72
+
+## 4.11.0
+
+### Added
+
+- evelope-unread-mc 24
+- write-alt (24, 32, 40)
+
+### Updated
+
+- evelope (24, 32, 40, 72)
+- padlock 24
+- padlock-open 24
+- pin (24, 32, 40, 72)
+- search (24, 32)
+- user 24

package/README.md

@@ -2,87 +2,79 @@
 
 Icon library for Länsförsäkringar web and app development.
 
-## Getting started
+## Scope of this README
 
-For web development, install via npm.
+This README covers the icons package only (`packages/icons`).
 
-```
+- icon package install and usage
+- icon export CLI and Node API
+- icon contribution flow
+
+For monorepo-level onboarding, use root [README.md](../../README.md).
+
+## Install
+
+```bash
 npm install @lansforsakringar/icons
 ```
 
-## Usage
+## Package Contents
 
-The library provides a set of SVG icons distributed as individual files, sprites, and JSX + TSX.
+The published package includes:
 
-The disitributed package (npm package) includes the following:
+- Individual SVG files: `{icon-name}[-mc]-{size}.svg`
+- Sprite files by size: `sprite[-mc]-{size}.svg`
+- JSX icon components
+- TSX icon components
+- Format manifests: `manifest.{format}.json`
 
-- Individual svg icons `{icon-name}[-mc]-{size}.svg`
-  - Set sizes (24, 32, 40, 48, 64, 72, 96) in multi color (mc) and monochrome.
-  - Misc "special" icons (e.g. arrows, logotypes, etc.) of varying sizes
-- Sprites compiled per size `sprite[-mc]-{size}.svg`
-  - Set sizes (24, 32, 40, 48, 64, 72, 96) and "special" sizes in multi color (mc) and monochrome.
-- Individual JSX components
-- Individual TSX components
-- Manifest files for each format `manifest.{format}.json`
+Standard sizes are available in monochrome and multicolor variants.
 
-The build script can be integrated into your build chain as a CLI command or as Node.js module.
+## CLI
 
-### CLI
+Binary name in this package: `lfds-icons-export`.
 
-```
+```text
 Usage
-  $ lf-icons [options]
+  $ lfds-icons-export [options]
 
 Options
   --out, -o     Output directory [dist]
-  --format, f   Output format (svg,sprite,jsx,tsx) [svg]
+  --format, -f  Output format (svg,sprite,jsx,tsx) [svg]
   --grep, -g    Filter icons by name
   --size, -s    Size(s) to export, comma separated [all]
   --color, -c   Include multicolor variants (disable: --no-color) [true]
   --mono, -m    Include monochrome variants (disable: --no-mono) [true]
   --help        Display this message
+```
+
+Example:
 
-Example
-  $ lf-icons -o dist/icons -f jsx -g bankid
+```bash
+npx lfds-icons-export -o dist/icons -f jsx -g bankid
 ```
 
-### Node.js
+## Node API
 
 ```js
 import { build } from '@lansforsakringar/icons'
 
-// Build JSX components for all sizes and colors of icons matching "bankid"
-await build({
-  out: 'dist/icons',
-  format: 'jsx',
-  grep: 'bankid'
+// Build JSX components for icons matching "bankid"
+await build('dist/icons', {
+	formats: ['jsx'],
+	grep: 'bankid'
 })
 ```
 
-#### Options
-
-- `out` Output directory, **default: `dist`**
-- `format` Output format (svg,sprite,jsx,tsx), **default: `svg`**
-- `grep` Filter icons by name
-- `size` Size(s) to export, list of numbers or "all", **default: `[all]`**
-- `color` Include multicolor variants, **default: `true`**
-- `mono` Include monochrome variants, **default: `true`**
-
-### SVG usage
-
-The standalone SVG files can be referenced either as inline img tag or (depending on your frontend tool chain) as an embedded resource.
-
-#### As inline `img`
+## Usage
 
-Path should reflect where you store and host the built icons.
+### SVG file
 
 ```html
 <img src="/icons/wallet-24.svg" class="icon" alt="Wallet" />
 ```
 
-#### As a JavaScript module
-
-This method requires that your tool chain supports importing SVG files as modules.
+### SVG imported as module
 
 ```js
 import wallet24 from '@lansforsakringar/icons/wallet-24.svg'
@@ -93,99 +85,65 @@ img.classList.add('icon')
 document.body.appendChild(img)
 ```
 
-#### As CSS background
-
-Perferrably use CSS post-processing tools to inline the SVG as a data URI.
-
-```css
-.wallet {
-  width: 24px;
-  height: 24px;
-  background-image: url('./icons/wallet-24.svg');
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-```
-
-### Sprite usage
-
-Sprites can either be embedded in the markup or referenced as an external resource.
-
-#### Referenced as external resource
-
-Note that the href path should to point to where you host the sprite.
-
-```html
-<svg class="icon" width="24" height="24">
-  <use xlink:href="/icons/sprite-24.svg#wallet-24"></use>
-</svg>
-```
-
-#### Referenced as embedded resource
-
-When embedded, they are to be included in the document _once_ and then referenced with the SVG `use` tag.
+### Sprite
 
 ```html
 <svg class="icon" width="24" height="24">
-  <use xlink:href="#wallet-24"></use>
+	<use xlink:href="/icons/sprite-24.svg#wallet-24"></use>
 </svg>
-
-<!-- Embed the sprite somewhere in the document, preferably last -->
-<svg width="0" height="0" style="position:absolute"><symbol>…</symbol></svg>
 ```
 
-### JSX/TSX usage
-
-If you have special requirements for the output component format, e.g. JSX runtime, you can use the CLI or Node.js API to generate icons and override the default settings with a [SVGR configuration file](https://react-svgr.com/docs/configuration-files/).
+### JSX/TSX component
 
 ```jsx
 import Wallet24 from '@lansforsakringar/icons/Wallet24.jsx'
 
 export default function MyComponent() {
-  return (
-    <div>
-      <Wallet24 class="icon" />
-    </div>
-  )
+	return <Wallet24 className="icon" />
 }
 ```
 
-### Manifest
+## Manifest
+
+A manifest is generated per format (`manifest.{format}.json`) and maps icon IDs to output paths.
 
-A build manifest is generated for each format (`manifest.{format}.json`). The manifest includes a mapping of icon id to the _absolute_ file path on disk.
+Example:
 
 ```json
 {
-  "wallet-24": "/dist/icons/wallet-24.svg"
+	"wallet-24": "/dist/icons/wallet-24.svg"
 }
 ```
 
-The sprite manifest includes not only the generated sprite file, but also mapping for each icon in the sprite for use as a `xlink:href`.
+For sprites, icon IDs map to `xlink:href` values:
 
 ```json
 {
-  "sprite-24": "/dist/icons/sprite-24.svg",
-  "wallet-24": "/dist/icons/sprite-24.svg#wallet-24"
+	"sprite-24": "/dist/icons/sprite-24.svg",
+	"wallet-24": "/dist/icons/sprite-24.svg#wallet-24"
 }
 ```
 
-### CSS
-
-The `.icon` CSS class is part of [LFUI Web Legacy](https://azuredo.lfnet.se/tfs/Lansforsakringar/Code-LFDS/_git/lfui-web-legacy) and helps with sizing and alignment. Colors are inherited from the text color (applied using the CSS color keyword `currentcolor`).
-
 ## Contributing
 
-After cloning the repo, install the dependencies and build our the icon sprites.
-
-```
+```bash
 npm install
 npm run build
 ```
 
-To add an icon, export your icon from Figma. Make sure to use only filled outlines and in color `#005AA0`. The build script will replace that exact HEX with `currentcolor`.
+To add an icon:
+
+1. Export from Figma using filled outlines in color `#005AA0`.
+2. Place the icon in `src/svg/{size}`.
+3. Run `npm run build`.
 
-Place the new icon in `src/svg/{size}` and build, `npm run build`.
+The build pipeline replaces `#005AA0` with `currentcolor`.
 
-## Deploy and release
+## Release
 
-After adding an icon, run `npm version minor`. A commit will be created that you should push. Then run `npm publish`. That's it.
+After adding icons:
+
+```bash
+npm version minor
+npm publish
+```

package/bin.js

@@ -3,7 +3,7 @@ import meow from 'meow'
 import { build } from './src/main.js'
 
 const cli = meow(
-  `
+	`
   Usage
     $ lf-icons [options]
 
@@ -19,52 +19,52 @@ const cli = meow(
   Example
     $ lf-icons -o dist/icons -f svg -g bankid
 `,
-  {
-    importMeta: import.meta,
-    flags: {
-      out: {
-        type: 'string',
-        shortFlag: 'o',
-        default: 'dist'
-      },
-      format: {
-        type: 'string',
-        shortFlag: 'f',
-        default: 'svg'
-      },
-      grep: {
-        type: 'string',
-        shortFlag: 'g'
-      },
-      size: {
-        type: 'string',
-        shortFlag: 's',
-        default: 'all'
-      },
-      color: {
-        type: 'boolean',
-        shortFlag: 'c',
-        default: true
-      },
-      mono: {
-        type: 'boolean',
-        shortFlag: 'm',
-        default: true
-      },
-      help: {
-        type: 'boolean'
-      }
-    }
-  }
+	{
+		importMeta: import.meta,
+		flags: {
+			out: {
+				type: 'string',
+				shortFlag: 'o',
+				default: 'dist'
+			},
+			format: {
+				type: 'string',
+				shortFlag: 'f',
+				default: 'svg'
+			},
+			grep: {
+				type: 'string',
+				shortFlag: 'g'
+			},
+			size: {
+				type: 'string',
+				shortFlag: 's',
+				default: 'all'
+			},
+			color: {
+				type: 'boolean',
+				shortFlag: 'c',
+				default: true
+			},
+			mono: {
+				type: 'boolean',
+				shortFlag: 'm',
+				default: true
+			},
+			help: {
+				type: 'boolean'
+			}
+		}
+	}
 )
 
 if (cli.flags.help) {
-  cli.showHelp(0)
+	cli.showHelp(0)
 } else {
-  const { out, format, size, ...opts } = cli.flags
-  build(out, {
-    ...opts,
-    formats: format?.split(','),
-    sizes: size?.split(',').map((s) => (isNaN(+s) ? s : +s))
-  })
+	const { out, format, size, ...opts } = cli.flags
+	build(out, {
+		...opts,
+		formats: format?.split(','),
+		sizes: size?.split(',').map((s) => (isNaN(+s) ? s : +s))
+	})
 }

package/dist/PersonAlreadyMoved72.jsx

@@ -0,0 +1,3 @@
+import * as React from "react";
+const PersonAlreadyMoved72 = props => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 72 72" {...props}><path fill="currentColor" d="M50.116 38.652C57.22 38.652 63 44.45 63 51.576S57.22 64.5 50.116 64.5s-12.884-5.798-12.884-12.924 5.78-12.924 12.884-12.924m0 1.988c-6.011 0-10.902 4.906-10.902 10.936s4.89 10.936 10.902 10.936c6.01 0 10.902-4.907 10.902-10.936 0-6.03-4.891-10.936-10.902-10.936" /><path fill="currentColor" d="M42.187 50.582h15.858v1.988H42.186zM31.173 7.5c4.5 0 8.685 1.956 11.56 5.29l-1.497 1.301a13.25 13.25 0 0 0-10.063-4.603c-7.321 0-13.253 5.904-13.253 13.182s5.932 13.182 13.253 13.182 13.253-5.904 13.253-13.182q0-.86-.11-1.7H34.06c-3.165 0-6.4-2.352-7.985-5.649l1.786-.864c1.274 2.65 3.851 4.524 6.199 4.524h11.918l.156.805c.182.944.275 1.908.275 2.884 0 3.091-.93 5.966-2.525 8.364 3.195 1.244 5.494 3.132 6.867 5.642a16 16 0 0 0-2.291.074c-1.27-1.796-3.21-3.144-5.844-4.066a15.23 15.23 0 0 1-11.442 5.156 15.23 15.23 0 0 1-11.614-5.35c-5.783 1.714-8.577 5.259-8.577 10.8v19.883H9V43.29c0-6.227 3.161-10.44 9.309-12.491a15.04 15.04 0 0 1-2.371-8.13c0-8.38 6.823-15.169 15.235-15.169" /></svg>;
+export default PersonAlreadyMoved72;

package/dist/PersonAlreadyMoved72.tsx

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const PersonAlreadyMoved72 = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 72 72" {...props}><path fill="currentColor" d="M50.116 38.652C57.22 38.652 63 44.45 63 51.576S57.22 64.5 50.116 64.5s-12.884-5.798-12.884-12.924 5.78-12.924 12.884-12.924m0 1.988c-6.011 0-10.902 4.906-10.902 10.936s4.89 10.936 10.902 10.936c6.01 0 10.902-4.907 10.902-10.936 0-6.03-4.891-10.936-10.902-10.936" /><path fill="currentColor" d="M42.187 50.582h15.858v1.988H42.186zM31.173 7.5c4.5 0 8.685 1.956 11.56 5.29l-1.497 1.301a13.25 13.25 0 0 0-10.063-4.603c-7.321 0-13.253 5.904-13.253 13.182s5.932 13.182 13.253 13.182 13.253-5.904 13.253-13.182q0-.86-.11-1.7H34.06c-3.165 0-6.4-2.352-7.985-5.649l1.786-.864c1.274 2.65 3.851 4.524 6.199 4.524h11.918l.156.805c.182.944.275 1.908.275 2.884 0 3.091-.93 5.966-2.525 8.364 3.195 1.244 5.494 3.132 6.867 5.642a16 16 0 0 0-2.291.074c-1.27-1.796-3.21-3.144-5.844-4.066a15.23 15.23 0 0 1-11.442 5.156 15.23 15.23 0 0 1-11.614-5.35c-5.783 1.714-8.577 5.259-8.577 10.8v19.883H9V43.29c0-6.227 3.161-10.44 9.309-12.491a15.04 15.04 0 0 1-2.371-8.13c0-8.38 6.823-15.169 15.235-15.169" /></svg>;
+export default PersonAlreadyMoved72;

package/dist/manifest.jsx.json

@@ -42,6 +42,7 @@
   "pig-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Pig72.jsx",
   "phone-retro-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PhoneRetro72.jsx",
   "phone-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Phone72.jsx",
+  "person-already-moved-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PersonAlreadyMoved72.jsx",
   "percent-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Percent72.jsx",
   "pension-state-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PensionState72.jsx",
   "pension-private-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PensionPrivate72.jsx",

package/dist/manifest.sprite.json

@@ -45,6 +45,7 @@
   "pig-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#pig-72",
   "phone-retro-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#phone-retro-72",
   "phone-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#phone-72",
+  "person-already-moved-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#person-already-moved-72",
   "percent-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#percent-72",
   "pension-state-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#pension-state-72",
   "pension-private-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/sprite-72.svg#pension-private-72",

package/dist/manifest.svg.json

@@ -42,6 +42,7 @@
   "pig-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/pig-72.svg",
   "phone-retro-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/phone-retro-72.svg",
   "phone-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/phone-72.svg",
+  "person-already-moved-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/person-already-moved-72.svg",
   "percent-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/percent-72.svg",
   "pension-state-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/pension-state-72.svg",
   "pension-private-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/pension-private-72.svg",

package/dist/manifest.tsx.json

@@ -42,6 +42,7 @@
   "pig-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Pig72.tsx",
   "phone-retro-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PhoneRetro72.tsx",
   "phone-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Phone72.tsx",
+  "person-already-moved-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PersonAlreadyMoved72.tsx",
   "percent-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/Percent72.tsx",
   "pension-state-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PensionState72.tsx",
   "pension-private-72": "/Users/magnus/Code/Work/lfds/packages/icons/dist/PensionPrivate72.tsx",

package/dist/person-already-moved-72.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none" viewBox="0 0 72 72"><path fill="currentColor" d="M50.116 38.652C57.22 38.652 63 44.45 63 51.576S57.22 64.5 50.116 64.5s-12.884-5.798-12.884-12.924 5.78-12.924 12.884-12.924m0 1.988c-6.011 0-10.902 4.906-10.902 10.936s4.89 10.936 10.902 10.936c6.01 0 10.902-4.907 10.902-10.936 0-6.03-4.891-10.936-10.902-10.936"/><path fill="currentColor" d="M42.187 50.582h15.858v1.988H42.186zM31.173 7.5c4.5 0 8.685 1.956 11.56 5.29l-1.497 1.301a13.25 13.25 0 0 0-10.063-4.603c-7.321 0-13.253 5.904-13.253 13.182s5.932 13.182 13.253 13.182 13.253-5.904 13.253-13.182q0-.86-.11-1.7H34.06c-3.165 0-6.4-2.352-7.985-5.649l1.786-.864c1.274 2.65 3.851 4.524 6.199 4.524h11.918l.156.805c.182.944.275 1.908.275 2.884 0 3.091-.93 5.966-2.525 8.364 3.195 1.244 5.494 3.132 6.867 5.642a16 16 0 0 0-2.291.074c-1.27-1.796-3.21-3.144-5.844-4.066a15.23 15.23 0 0 1-11.442 5.156 15.23 15.23 0 0 1-11.614-5.35c-5.783 1.714-8.577 5.259-8.577 10.8v19.883H9V43.29c0-6.227 3.161-10.44 9.309-12.491a15.04 15.04 0 0 1-2.371-8.13c0-8.38 6.823-15.169 15.235-15.169"/></svg>

package/dist/sprite-12.svg

@@ -1 +1 @@
-<svg width="0" height="0" style="position:absolute"><symbol fill="none" viewBox="0 0 12 13" id="external-link-12" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd" clip-path="url(#aaa)" clip-rule="evenodd"><path d="m6.002.484-.006 1.75h2.84l-4.74 4.75 1.4 1.4 4.75-4.74v2.834h1.75V.484z"/><path d="M-.004 1.484v11h11v-4h-2v2h-7v-7h2v-2z"/></g><defs><clipPath id="aaa"><path fill="#fff" d="M-.004.484h12v12h-12z"/></clipPath></defs></symbol><symbol fill="none" viewBox="0 0 12 13" id="plus-12" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M4.996 1.484h2v10h-2z"/><path fill="currentColor" d="M.996 5.484h10v2h-10z"/></symbol></svg>
+<svg width="0" height="0" style="position:absolute"><symbol fill="none" viewBox="0 0 12 13" id="external-link-12" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd" clip-path="url(#aba)" clip-rule="evenodd"><path d="m6.002.484-.006 1.75h2.84l-4.74 4.75 1.4 1.4 4.75-4.74v2.834h1.75V.484z"/><path d="M-.004 1.484v11h11v-4h-2v2h-7v-7h2v-2z"/></g><defs><clipPath id="aba"><path fill="#fff" d="M-.004.484h12v12h-12z"/></clipPath></defs></symbol><symbol fill="none" viewBox="0 0 12 13" id="plus-12" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M4.996 1.484h2v10h-2z"/><path fill="currentColor" d="M.996 5.484h10v2h-10z"/></symbol></svg>