tailwindcss icons下载 - tailwindcss icons源码下载

tailwindcss icons

其他源码

v1.8.1

下载

？您可以通过在 GitHub 上赞助作者来帮助他成为一名全职开源维护者。

@egoist/tailwindcss-图标

使用 Iconify 中的任何图标

安装

npm i @egoist/tailwindcss-icons -D

用法

在你的tailwind.config.js中：

 const { iconsPlugin , getIconCollections } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [
    iconsPlugin ( {
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections : getIconCollections ( [ "mdi" , "lucide" ] ) ,
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    } ) ,
  ] ,
}

您还需要安装@iconify/json （完整图标集合，50MB）或@iconify-json/{collection_name} （单个图标包）：

 # install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

然后您可以在 HTML 中使用图标：

 <!-- pattern: i-{collection_name}-{icon_name} -->
< span class =" i-mdi-home " > </ span >

在这里搜索您要使用的图标：https://icones.js.org

提示

要获取 typescript 类型的图标名称的完整列表，您可以参考此问题。

插件选项

选项	类型	默认	描述
前缀	细绳	`i`	匹配图标规则的类前缀
规模	数字	`1`	相对于当前字体大小的缩放
笔划宽度	数字	`undefined`	图标的描边宽度（这可能不适用于所有图标）
额外的属性	记录<字符串，字符串>	`{}`	应用于生成的 CSS 的额外 CSS 属性。
集合名称别名	[CollectionNames 中的键]?: 字符串	`{}`	用于自定义集合名称的别名。

自定义图标

您还可以在此插件中使用自定义图标，例如：

 module . exports = {
  plugins : [
    iconsPlugin ( {
      collections : {
        foo : {
          icons : {
            "arrow-left" : {
              // svg body
              body : '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>' ,
              // svg width and height, optional
              width : 24 ,
              height : 24 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

然后您可以使用此自定义图标作为类名称： i-foo-arrow-left 。

提示

要从目录中读取自定义图标，可以参考从文件系统加载 svgs

动态生成图标

这个想法来自@iconify/tailwind，感谢 Iconify 作者的伟大工作！

如果您想安装@iconify/json并使用您想要的任何图标，您应该在tailwind.config.js中添加另一个插件。

这是因为我们无法为@iconify/json中的所有图标提供自动完成功能，这会使您的编辑器变慢。

 const { iconsPlugin , dynamicIconsPlugin } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [ iconsPlugin ( ) , dynamicIconsPlugin ( ) ] ,
}