@psff/cmp-icon NPM

@psff/cmp-icon `psff-icon`

Component to show icons from an svg sprite file.

Getting started

Setup the package as a dependencie.
```
yarn add @psff/cmp-icon
```

Create an svg sprite file and add to the project. For example, create the file src/assets/svg/sprite.svg with this content:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="circle" viewBox="0 0 129 129">
      <circle cx="50%" cy="50%" r="50%" />
    </symbol>
    (...)
  </defs>
</svg>

Add the plugin to the Vue instance, set the path to the svg sprite file.

import SvgSpritePlugin from '@psff/cmp-icon';

Vue.use(
  SvgSpritePlugin,
  {
    svgSpriteFile: require('@/assets/svg/sprite.svg'),
  }
);

Use the component ''.

.my-icon {
  --psff-icon-stroke: #000;
  --psff-icon-height: 1rem;
  --psff-icon-width: 1rem;

  &.big {
    --psff-icon-height: 5rem;
    --psff-icon-width: 5rem;
  }
}

<psff-icon class="my-icon" name="circle" />
<psff-icon class="my-icon big" name="circle" />

Specifications

Plugin `SvgSpritePlugin`

This plugin register <psff-icon> component and set the default properties.

Options are:

svgSpriteFile (string, optional): url to the svg sprite file

Parameters:

svgSpriteFile (string, required): url to the svg sprite file. Not required if you use the plugin specifying a sprite file
name (string, required): icon name (defined in the svg sprite)
title (string, optional): icon title
description (string, optional): icon description