Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@shopware-ag/meteor-icon-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

meteor-icon-kit

An icon library and toolkit that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language

Prerequisites

This project requires npm or yarn. npm and yarn are really easy to install. To make sure you have one of them available on your machine, try running the following command. This project itself was created with npm.

$ npm -v
8.1.0

$ yarn -v
1.22.15

meteor-icon-kit

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install the meteor-icon-kit, run:

$ npm install @shopware-ag/meteor-icon-kit

Or if you prefer using Yarn:

$ yarn add @shopware-ag/meteor-icon-kit

Usage

Start by importing/using the provided styling. Either utilizing sass/scss:

@import "@shopware-ag/meteor-icon-kit/icons/meteor-icon-kit.scss";

Or classic via the css file:

<link
  rel="stylesheet"
  href="your-asset-folder/meteor-icon-kit-8e350007463127dbe9f66c60cd6896ca.css"
/>

Then, you can use the icons:

import wallet from "@shopware-ag/meteor-icon-kit/icons/regular/wallet.svg";

Dynamic colors

Take this pseudo html:

<span class="icon-example">
  <wallet />
</span>

By defining the following class structure in CSS you can change the color of the svg dynamically:

.icon-example {
  display: block;
  color: green;

  svg {
    fill: currentColor;

    path,
    use {
      fill: currentColor;
    }
  }
}

Example

Following is an example for a Vue3 project using Vite as a bundler. We are using the vite-svg-loader to load the svg files.

In your vite.config.js add the following:

//...
import svgLoader from "vite-svg-loader";

export default {
  plugins: [
    //...
    svgLoader(),
  ],
};

This way you can import your svg files as components:

<template>
  <ActivityIcon />
</template>

<script setup>
import ActivityIcon from "@shopware-ag/meteor-icon-kit/icons/regular/activity.svg";
</script>

You can find this example as a CodeSandbox template here.

Built With

Typescript
Figma API
VS-Code
Love 💙 💙 💙

Figma library

Meteor Icon Kit is available as a Figma library through the Figma Community. To use the icons, log in to your Figma account and duplicate the file to your drafts.

License

See the LICENSE file for license rights and limitations (MIT).

@shopware-ag/meteor-icon-kit