meteor-icon-kit

一个图标库和工具包，遵循一个最小的，但高度表达风格完美地与Shopware的产品语言

先决条件

这个项目需要 npm 或者 yarn. npm 和 纱 都很容易安装。 为了确保您的机器上有其中一个可用， 尝试运行以下命令。这个项目本身是由 npm.

$ npm -v
8.1.0

$ yarn -v
1.22.15

目录表

• meteor-icon-kit
  • 先决条件
  • 目录表
  • 安装
  • 使用
  • 轻快地例子
  • 建立与
  • Figma图书馆
  • 许可证

安装

安装前： 请阅读 先决条件

要安装流星图标工具包，请运行：

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

或者如果你更喜欢使用Yarn：

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

使用

首先导入所提供的样式表：

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

或者经典的 <link>：

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

[!请注意) 之前的Sass导入路径 @shopware-ag/meteor-icon-kit/icons/meteor-icon-kit.scss 仍然可以工作-它现在在旧文件名下提供相同的纯CSS -但它已被弃用。请迁移到 .css 导入。

然后，你可以使用以下图标：

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

动态颜色

以这个伪html为例：

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

中定义下面的类结构 CSS 你可以动态地改变SVG的颜色：

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

  svg {
    fill: currentColor;

    path,
    use {
      fill: currentColor;
    }
  }
}

例子

下面是一个使用Vite作为打包器的ve3项目示例。 我们正在使用 vite-svg-loader 加载SVG文件。

在你的 vite.config.js 增加以下内容：

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

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

这样你就可以将svg文件作为组件导入：

<template>
  <ActivityIcon />
</template>

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

您可以找到这个示例作为CodeSandbox模板 在这里.

建立与

• 打印稿
• Figma API
• vs代码
• Love::blue_heart::blue_heart::blue_heart：

Figma图书馆

流星图标工具包是可用的 Figma图书馆 通过Figma社区。要使用图标，请登录您的Figma帐户并将该文件复制到您的草稿中。

许可证

看到 许可证 许可权利和限制文件（MIT）。

2024©shopware AG