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

Table of contents

• meteor-icon-kit
  • Prerequisites
  • Table of contents
  • Installation
  • Usage
  • Built With
  • Figma library
  • License

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">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <!--- ... -->
    </svg>
</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;
    }
  }
}

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).

2022 © shopware AG