hexo-iconify插件让你能够使用所有iconify图标

cover image
AI摘要
这篇文章讲了hexo-iconify插件,支持在hexo博客生成程序中使用所有iconify图标集。插件以helper形式注入hexo,可轻松使用Icônes的图标。安装前需确保项目引入@iconify/json和@iconify/utils,以及hexo-fs。推荐下载编译后文件,并放入主题目录的scripts文件夹。插件输出图标的SVG格式的HTML内容,安装方法包括手动下载或通过npm安装。

插件介绍

hexo-iconify 为 hexo 博客生成程序提供了 iconify 图标集的支持,你可以轻松的使用Icônes (icones.netlify.app)的所有图标,它以 helper 的形式注入 hexo,占用了 icon 这一 helper 名,务必确保你的程序中没有使用到 icon 这一 helper 名,然后你就可以在项目中像这样使用插件了:

span.menu-icon !{icon('ant-design:home-outlined')}

它输出为 svg 格式的 html 内容:

MARKUP
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="1em"
  height="1em"
  viewBox="0 0 1024 1024"
>
  <path
    fill="currentColor"
    d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7l23.1 23.1L882 542.3h-96.1z"
  ></path>
</svg>

插件安装

插件外部依赖于@iconify/json@iconify/utils,并使用到了hexo-fs(该依赖默认情况下,hexo 是自带的),因此如果你的项目中没有引入以上插件,务必先行安装。

npm i @iconify/json @iconify/utils

我更推荐你下载 hexo-iconify 的编译后文件,直接放到主题目录的scripts文件夹中,这样更加合理

Releases · g-mero/hexo-iconify (github.com)

当然你也可以通过 npm 安装 hexo-iconify,这会使得所有主题都能使用 icon 的 helper

npm i hexo-iconify

评论
正在加载评论组件...