meteor-icon-kit

Warning:

This repository is still under development and should not be used yet.

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
  • Getting Started
  • Installation
  • Usage
  • Built With
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

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 the icon you would like:

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 :blue_heart: :blue_heart: :blue_heart:

License

MIT License © shopware AG