npm package: @gn-as/icons-svelte
Description: Gina Design System SVG icons as Svelte components
Latest version: 1.4.5

# Overview


This zero dependency icon library builds [Gina icons](https://gitlab.com/gn-as/ecosystem/platform/resops/gina/icons)
as Svelte components.

## [Icon Index](ICON_INDEX.md)

# Installation

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

```sh
## 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](ICON_INDEX.md) for a list of supported icons.

```svelte
<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`.

```svelte
<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.

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

## Labelled

```svelte
<Apps aria-label="Apps" />
```

## Labeled icon that can have focus

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

## Labelled by

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

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

# API

## Props

All props are optional.

| Name  | Type                                          | Default value |
| :---- | :-------------------------------------------- | :------------ |
| size  | <code>16 &#124; 20 &#124; 24 &#124; 32</code> | `16`          |
| title | `string`                                      | `undefined`   |

# Releasing

This library is dependent on the [`@gn-as/icons`][@gn-as/icons-svelte] 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`.
1. Run `npm install` to update the `package-lock.json` file.
1. _[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](tests/__snapshots__/index.test.ts.snap)
     and run the tests again to update the snapshot file.
   - Verify all tests pass successfully.
1. Run `npm run prepack` to update the [`ICON_INDEX.md`](ICON_INDEX.md)
   file.
1. 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].
1. Create a new merge request with the `main` as the "Source" branch and
   `release` being "Target" branch.
1. Wait for the CI pipeline to succeed.
1. Merge.

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

# [Changelog](https://gitlab.com/gn-as/ecosystem/platform/resops/gina/icons-svelte/-/blob/release/CHANGELOG.md)

The CHANGELOG is only visible on the [`release` branch](https://gitlab.com/gn-as/ecosystem/platform/resops/gina/icons-svelte/-/tree/release/).

# [Contributing](CONTRIBUTING.md)

# License

[Apache 2.0](LICENSE)

[npm]: https://img.shields.io/npm/v/carbon-icons-svelte.svg?color=262626&style=for-the-badge
[npm-url]: https://npmjs.com/package/carbon-icons-svelte
[conventional commits specification]: https://www.conventionalcommits.org/en/v1.0.0/#summary
[@gn-as/icons-svelte]: https://gitlab.com/gn-as/ecosystem/platform/resops/gina/icons
[@gn-as/icons]: https://gitlab.com/gn-as/ecosystem/platform/resops/gina/icons