包简介

Responsive and retina-ready CSS sprites generator

README 文档

README

A responsive and retina ready CSS sprites generator. Built to be used with Laravel models, but can be used separately as well.

This tool:

generates a single sprite image based on a (database) collection entries by using ImageMagick library,
prepares a CSS file (including one unique class per icon),
[optionally] creates a sample HTML file to demonstrate usage.

🙋 Generated sprites will be downscaled to look good on retina displays. So make sure using twice the size for iconWidth and iconHeight (use 64x64 if you want to display them as 32x32 icons).

Saying that, it is still possible to change CSS width/height values of the icons on the fly while keeping the background image obtained from the sprite.

Thus, you can define your own @media rules to use same sprites in different sizes if needed.

Installation

composer require sahtepetrucci/responsive-retina-css-sprites

Usage

In order this to work, you'll need to provide a collection of objects including id and icon fields.

use Sahtepetrucci\SpritesGenerator\SpritesHandler;
$handler = new SpritesHandler();
$handler->generate($collection);

Example 1

$collection = [
    (object)[
        'id' => 1,
        'name' => 'Item',
        'icon' => 'icons8-airport-100.png'
    ],
    (object)[
        'id' => 2,
        'name' => 'Another Item',
        'icon' => 'icons8-bus-100.png'
    ],
];

$handler->generate($collection);
$handler->createSampleHtml($collection); //optional

Output

CSS

/* Normal Resolution CSS /*/
.items-spr {
    display:inline-block;vertical-align:middle;
    background-image:url('../images/items-1x.png?t=1592435357');
    background-repeat:no-repeat;
    background-size:200% 100%;
    width:50px;height:50px;
    line-height:50px;
}

/* HD/Retina CSS /*/
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    .items-spr {
        background-image:url('../images/items-2x.png?t=1592435357');
    }
}

.items-spr-1{background-position:0% 0%}
.items-spr-2{background-position:100% 0%}

/* A total of 2 images are combined here. */

HTML (Optional)

<html>
<head>
<link rel="stylesheet" href="css/items.css"></head><body>

<i class="items-spr items-spr-1" title="Item"></i>
<i class="items-spr items-spr-2" title="Another Item"></i>
<br /><br />

<i style="width:25px;height:25px" class="items-spr items-spr-1" title="Item"></i>
<i style="width:25px;height:25px" class="items-spr items-spr-2" title="Another Item"></i>

</body></html>

Example 2 (Generating sprites in Laravel)

use Sahtepetrucci\SpritesGenerator\SpritesHandler;
...

$categories = Category::select('id','icon')->get();

$handler = new SpritesHandler();
$handler->name = 'categories';
$handler->inputDir = storage_path('app/public/images/categories');
$handler->outputDir = storage_path('app/public/sprites/categories');
$handler->iconWidth = 64;
$handler->iconHeight = 64;
$handler->generate($categories);

Using sprites in Blade

<link href="{{ asset('storage/sprites/categories/css/categories.css') }}" rel="stylesheet">

@foreach ($categories as $category)
    <i class="categories-spr categories-spr-{{ $category->id }}" title="{{ $category->name }}"></i> 
    {{ $category->name }}
    <br />
@endforeach

Sample icons are from icons8.com.

sahtepetrucci/responsive-retina-css-sprites 适用场景与选型建议

sahtepetrucci/responsive-retina-css-sprites 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 35 次下载、GitHub Stars 达 0，最近一次更新时间为 2020 年 06 月 17 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「generator」「css」「responsive」「png」「icon」「sprite」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 sahtepetrucci/responsive-retina-css-sprites 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 sahtepetrucci/responsive-retina-css-sprites 我们能提供哪些服务？

定制开发 / 二次开发

基于 sahtepetrucci/responsive-retina-css-sprites 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发