README

此包包含以下 lucide 实现

所有 svg 文件
包含 svg 字符串的 JavaScript 库。
图标字体
svg 图标精灵

什么是 lucide？请在这里阅读这里。

为什么选择 lucide-static？

此包适用于非常特定的用例，例如如果您想在 JavaScript 项目中使用图标字体、svg 精灵、普通 svg 或 Common.js Svg 字符串。

警告

不推荐将此包用于网页/应用程序中的 svg 精灵或图标字体，用于原型设计是可行的。我们建议使用 Web 应用程序的打包器以确保您仅从图标库中打包使用的图标（Threeshaking）。否则，它将加载所有图标，使您的网页加载速度变慢。Threeshaking 仅在以下包中可用：lucide、lucide-react、lucide-vue、lucide-vue-next、lucide-angular、lucide-preact

安装

包管理器

yarn add lucide-static

或

npm install lucide-static

CDN

<!-- Svg File -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />

<!-- Icon Font -->
<style>
  @font-face {
    font-family: 'LucideIcons';
    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
  }
</style>

使用方法

查看 codesandbox 示例。

SVG 文件

Svg 文件作为图像

在例如 html 中使用它

<!-- Svg File -->
<img src="~lucide-static/icons/home.svg" />

.home-icon {
  background-image: url(~lucide-static/icons/home.svg);
}

确保您有正确的 webpack 加载器来实现此功能。 url-loader

Svg 文件内联

您可以通过针对 lucide-static/icons/{icon-name}.svg 来简单地导入每个 svg。要在项目中使用 svg，您可以使用例如 svg 加载器。

import arrowRightIcon from 'lucide-static/icons/arrow-right';

// return string of a svg

SVG 图标精灵

您可能需要为此添加额外的加载器。

<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home" />

<!-- or -->
<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="#alert-triangle" />
</svg>

<svg>...sprite svg</svg>

如果您愿意，可以使用 CSS 来保存您的 SVG 基础属性

.lucide-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

并按照以下方式更新 svg

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="lucide-icon"
>
<use
    href="#alert-triangle"
  />
</svg>
<svg>
  ...sprite svg
</svg>

图标字体

@import ('~lucide-static/font/lucide.css');

<div class="icon-home"></div>

Node.js

要在您的 Nodejs 项目中使用 lucide 图标，您可以按以下方式导入每个图标

const { messageSquare } = require('lucide-static/lib');

注意：每个图标名称都是 camelCase。

Node.js 项目中的示例

const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>Lucide Icons</h1>
        <p>This is a lucide icon ${messageSquare}</p>

      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Example app listening at https://:${port}`);
});

贡献

有关如何贡献的更多信息，请参阅贡献指南。

发现了错误或想为文档做出贡献？在 Github 上编辑此页面

社区

加入我们的 Discord 服务器！

许可证

Lucide 对商业和个人使用完全免费，此软件根据 ISC 许可证许可。

webtourismus / lucide

维护者

详细信息