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
  • Vite example
  • 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 the provided stylesheet:

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

Or classic via a <link>:

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

[!NOTE] The previous Sass import path @shopware-ag/meteor-icon-kit/icons/meteor-icon-kit.scss still works — it now ships the same plain CSS under the old file name — but it is deprecated. Please migrate to the .css import.

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

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

2024 © shopware AG