@lansforsakringar/lfui-icons

Länsförsäkringar Icons

Crisp SVG icon library for Länsförsäkringar web development.

Full icon reference →

Table of contents

• Getting started
• Usage
• Bugs and feature requests
• Contributing
• Making a release

Getting started

To install Icons in your project, you will need to configure your environment for GitHub Packages.

First, authenticate npm with GitHub Packages. To do that, generate a personal access token which you use as your password. Make sure to give the token access rights to both repo and read:packages scopes.

npm login --scope=@lf-digitala-kanaler --registry=https://npm.pkg.github.com

Add a .npmrc file in your project root folder.

@lf-digitala-kanaler:registry=https://npm.pkg.github.com

Add an .env file in your project root folder.

GITHUB_TOKEN=<PERSONAL_ACCESS_TOKEN>

Install the package as you normally would.

npm install @lf-digitala-kanaler/lfui-icons

Usage

Icons ships with svg sprites. They are self-hosted in your project (because of CORS), so you need to copy the icon sprites to your project from this package. This can be done manually, but preferably automaticlly. In below example, we're using copyfiles.

npm install copyfiles --save-dev

Add a script to your package.json. Make sure to keep the exact folder structure inside the sprite folder, so we don't load any unused sprites.

"script": {
 "copy:icons": "copyfiles copyfiles -u 4 node_modules/lfui-icons/dist/sprite/**/* src/icons"
}

Now, use the the icons in your project

<svg role="presentation" class="icon" width="20" height="20">
  <use xlink:href="{{path-to-icons}}/sprite/20/icons.svg#icon-wallet-20"></use>
</svg>

The .icon is part of Components and helps with alignment. Colors are controlled with currentColor.

Bugs and feature requests

If you with to report a bug or submit a feature request, feel free to open an issue. The more information that you provide, the better.

Contributing

After cloning this repo, install the dependencies and build the icons.

npm install
npm run build

Working with branches and pull requests

The latest and stable version is always in the main branch. New features and patches are then added through dedicated branches and pull requests.

When working on a new feature, begin by creating a new branch from main. After finishing your work, squash merge main into your branch and then create a pull request.

Please document the changes that you make in the pull request, along with potential changes to existing classes or variables that should be added to a migration guide later on.

Adding an icon

Export icon from sketch/figma and make sure to only use filled outlines of the color #ff0000. That color will be transformed to currentColor when the icon sprites are built.

Place the new icon in src/{size} and build, npm run build.

Linting

The project uses standard. There are no automated tests beyond that.

npm test

Making a release

When the pull request is accepted and merged, a Github Action will automatically create a new minor release and bumb the version. You can control the release type with your commit message