Overview

This zero dependency icon library builds Gina icons as Svelte components.

Icon Index

Installation

Install [@gn-as/icons-svelte] as a development dependency.

## Yarn
yarn add -D @gn-as/icons-svelte

## npm
npm i -D @gn-as/icons-svelte

## pnpm
pnpm i -D @gn-as/icons-svelte

Usage

Basic

Import the icon from the @gn-as/icons-svelte/lib folder. See the Icon Index for a list of supported icons.

<script>
  import Apps from "@gn-as/icons-svelte/lib/Apps.svelte";
</script>

<Apps />

Custom size

Use the size prop to specify the icon size.

Supported icon sizes include 16, 20, 24, and 32.

The default size is 16.

<Apps size={16} />
<Apps size={20} />
<Apps size={24} />
<Apps size={32} />

Custom props

$$restProps are forwarded to the svg element.

You can use fill to customize the color or pass any other valid svg attribute to the component.

<Apps fill="red" class="icon" />

Labelled

<Apps aria-label="Apps" />

Labeled icon that can have focus

<Apps aria-label="Apps" tabindex="0" />

Labelled by

<label id="apps-list">Apps</label>

<Apps aria-labelledby="apps-list" />

API

Props

All props are optional.

| Name | Type | Default value | | :---- | :-------------------------------------------- | :------------ | | size | 16 | 20 | 24 | 32 | 16 | | title | string | undefined |

Releasing

This library is dependent on the @gn-as/icons library and updates are generally driven by a new release of that package bringing in new icons. Therefore, generally you only need to:

1. Bump the version of the @gn-as/icons package in package.json.
2. Run npm install to update the package-lock.json file.
3. [If icons have been added] Update the tests to reflect expected changes from new icons being added.
   • There are a couple of tests that verify the output of the Svelte components and verify that the quantity of icons has not changed in an unexpected way. These tests need to be updated.
   • First, you can run the tests by running npm run test. If new icons were added and no tests are broken, something is likely not published correctly in the @gn-as/icons package.
   • You'll need to update the quantity of icons: increment the number on the failing test to the correct value, confirming the number "makes sense" relative to your expectations.
   • A snapshot is compared as well and will likely fail. To fix this, delete the contents of tests/snapshots/index.test.ts.snap and run the tests again to update the snapshot file.
   • Verify all tests pass successfully.
4. Run npm run prepack to update the ICON_INDEX.md file.
5. Commit changes following the Conventional Commits specification
   • New icons coming in would be a feat type, as it's bringing in a new icon; the equivalent of a "feature" in this package.
   • Otherwise, it would be a type of fix.

Regardless of the changes published, the overall release process is the same:

1. Make changes and commit following the Conventional Commits specification.
2. Create a new merge request with the main as the "Source" branch and release being "Target" branch.
3. Wait for the CI pipeline to succeed.
4. Merge.

This publishes a new tagged release and NPM package automatically via the CI pipeline.

Changelog

The CHANGELOG is only visible on the release branch.

Contributing

License

Apache 2.0