Lucide 中文网

Appearance

以图片形式链接 ​

🌐 Link as Image

在某些情况下，你可能希望将 Lucide 图标作为图片使用，而不是内联 SVG。这在出于性能原因或当你想在不支持内联 SVG 的情况下使用图标时特别有用。

🌐 In some cases, you might want to use Lucide icons as images instead of inline SVGs. This can be useful for performance reasons or when you want to use the icons in contexts where inline SVGs are not supported.

在HTML中 ​

🌐 In HTML

你可以在 HTML 中使用 <img> 标签直接链接到 SVG 文件。SVG 文件的路径将取决于你如何设置你的项目。

🌐 You can link to the SVG files directly in your HTML using the <img> tag. The path to the SVG files will depend on how you have set up your project.

html
<html>
  <body>
    <img src="node_modules/lucide-static/icons/smile.svg" alt="Smile Icon">
  </body>
</html>
html
<html>
  <body>
    <img src="~/lucide-static/icons/smile.svg" alt="Smile Icon">
  </body>
</html>
html
<html>
  <body>
    <img src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg" alt="Smile Icon">
  </body>
</html>

对于 CDN 用户

图标名称可能会在未来的版本中更改。确保在URL中设置明确版本，以避免破坏更改。 “https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg”

在 CSS 中 ​

🌐 In CSS

你也可以在 CSS 中将图标用作背景图片。这对于向按钮、链接或其他元素添加图标非常有用。

🌐 You can also use the icons as background images in your CSS. This is useful for adding icons to buttons, links, or other elements.

css
.button {
  background-image: url('node_modules/lucide-static/icons/smile.svg');
}
css
.button {
  background-image: url('~/lucide-static/icons/smile.svg');
}
css
.button {
  background-image: url('https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg');
}

对于 CDN 用户

图标名称可能会在未来的版本中更改。确保在URL中设置明确版本，以避免破坏更改。 “https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg”