Ikonate完全可定制和可访问的矢量图标

Ikonate

Ikonate是完全可定制和可访问,优化的矢量图标。

要了解有关该项目的更多信息并在线生成图标,请访问网站Ikonate.com。在下载的.zip文件中,您会发现:

  • 自定义SVG图标作为独立文件(非常适合不想编辑代码的设计人员)
  • 使用html演示定制SVG精灵
  • 定制的图标html演示为内联SVG

您还可以按照以下文档生成包含所有可用图标的通用演示文件,并手动进行自定义。

安装

Git存储库

您可以克隆此存储库以在项目中手动安装Ikonate …

1
git clone https://github.com/eucalyptuss/ikonate.git

用npm安装

…或者您可以使用npm包管理器下载图标。

1
npm安装ikonate

建立

要生成通用演示文件和SVG精灵,请先安装npm依赖项。

1
npm安装

然后,从主repo目录运行build命令。

1
npm run build

演示和文件结构

原始SVG

所有图标都可以作为原始的,没有样式的SVG使用./ikonate/icons

演示文件

要查看演示文件,请记住首先运行构建命令。

内联SVG和SVG精灵的生成演示分别在./ikonate/build/inline/index.html和下提供./ikonate/build/sprite/index.html

它不工作!如果直接在浏览器中打开精灵演示,则可能无法正确显示图标。要修复它,请使用本地服务器(如http-server)打开它。

用法

作为<img>background-image

参考:CSS技巧:使用SVG作为

要将图标生成为单独的样式 svg文件,请访问Ikonate.com

请记住,使用图标作为<img>background-image,您无法使用CSS自定义它们。

作为内联SVG。

参考:CSS技巧:使用“内联”SVG

要将图标用作内联svg,请使用适合您项目的技术导入所需的图标./ikonate/icons

使用此方法,您可以稍后使用CSS自定义图标

作为SVG精灵。

参考:CSS技巧:use带外部参考的SVG

成功运行构建命令后,您将找到包含所有可用图标的SVG精灵./ikonate/sprite

要生成自定义优化的SVG精灵,请访问Ikonate.com

使用此方法,您可以稍后使用CSS自定义图标

如果您想了解有关在项目中使用SVG的不同方法的更多信息,请查看以下文章:

定制

要使用CSS自定义图标,您需要将图标用作内联SVG或SVG精灵。

您可以使用以下CSS参数来自定义图标:

  • width
  • height
  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-linejoin

例如:

1
2
3
4
5
6
宽度:24px;
身高:24px;
stroke:currentColor;
笔画宽度:2;
stroke-linecap:round;
stroke-linejoin:round;

查看演示文件以获取代表性示例。

您还可以在Ikonate.com上生成样式和所有自定义演示文件。

无障碍

Ikonate免费开源。在构建此软件时,我们已尽最大努力遵循最佳可访问性实践,但您需要调整它并使其在项目中真正可访问。

例如,给予图标的所有标题和描述都应被视为占位符,并根据每个图标的实际角色在实现中进行更改。在许多情况下,您可能根本不需要它们。

要了解有关此主题的更多信息,请阅读Chris Coyier的优秀文章:如何使我的图标系统可访问?

使用权

Ikonate可在麻省理工学院获得。您可以在个人和商业项目中随意使用。

来了,老弟
-------------    本文结束  感谢您的阅读    -------------
0%