legacy-icons/vendor-icons

来自编码社区各供应商的图标和徽标

1.0.0 2016-02-18 10:43 UTC

README

NPM version Bower version Packagist version Nuget version

Dependency Status Build Status

关于

来自编码社区各供应商的图标和徽标。虽然该项目对新图标开放,但其作者承认该项目有点倾向于JavaScript / Web & HTML5 / 混合应用。

此项目仅提供来自各种项目的图标。所有图标都通过以下尺寸(以像素为单位)提供

  • 16x16
  • 32x32
  • 48x48
  • 64x64
  • 96x96
  • 128x128
  • 256x256

CSS精灵表

您可以直接使用常见的IMG标签将图标插入到HTML中

<img alt="Github logo" src="dist/32x32/github.png" width="32" height="32">

除了图标本身之外,该项目还提供了一组图标的CSS精灵表。这个精灵表允许您只加载1个图像,从而减少HTTP调用。

这就是它的实际样子

Spritesheet Spritesheet

这个单独图像中图标的全部定位都是通过CSS完成的,这允许您只需添加带有正确类的块类型标签即可获得相同的结果

<div class="vendor-icons github"></div>

只需记得将CSS样式表添加到HTML页面的HEAD中!

安装

使用NPM获取包

npm install vendor-icons

使用Bower获取包

bower install vendor-icons

使用Composer / Packagist获取包

composer require legacy-icons/vendor-icons

使用NuGet获取包

Install-Package vendor-icons

构建整个项目或您的自定义项目

我们使用Gulp来构建项目,因此如果您想重新构建或自定义此项目,您将需要Gulp。

安装Gulp后,并将您的CLI指向工作目录,首先安装依赖项

使用NPM 2.x.x

npm install

使用NPM 3.x.x(在安装此模块的依赖项之前解决node-spritesheet的依赖项)

npm install grunt grunt-contrib-coffee grunt-contrib-clean

npm install

然后确保您已安装ImageMagick以构建精灵表。

然后,您可以运行gulp build任务来构建项目

gulp build

构建任务做什么?

首先,它从src文件夹中获取PNG文件,并将它们粘贴到dist文件夹中。

然后,它从src文件夹中位于PNG图像创建一个精灵表,从而在dist中创建一个sprite文件夹。

例如,如果您只想在精灵表中包含css3html5图标,您只需将此项目分支出来,将您的CLI指向工作目录,清空src目录,除了PNG格式的css3html5图标,然后运行gulp build任务。

您将在dist文件夹中获得适当的精灵表和图标的副本。

许可证

本项目中每个图标均属于其原始作者,其中大多数受版权保护。其中一些图标可能与项目的官方图标/徽标不匹配。

实际上,此图标集相当具有观点,但肯定会接受改进或批评。

请注意,项目“vendor-icons”不将这些图标视为默认免费使用:如果您想在项目中使用这些图标,您可能|应当|必须与所有者核实,以确保您对图标的使用的确是OK的。

本项目的目的是遵循任何类型的“上游设计”。比如说,NPM创建一个GitHub仓库来托管NPM标志的SVG/EPS/AI文件,那么vendor-icons的职责就是创建一个工作流程,将这个仓库作为NPM图标的源。每个项目和/或公司处理图形资产的方式都不同,因此vendor-icons无法提供通用的使用或授权指南,因为每个图标可能有自己的一套指南/政策/许可。

如果您不确定您对任何图标的用途是否合法,请查阅版权所有者。

以下项目提供了图标

关于其余部分(除了图标以外的所有这些存储库)

本存储库的所有内容(不包括图标包)均受MIT许可

尽管如此,它只是由几个简单的JSON文件和Readme组成。