README

一个响应式和视网膜准备好的CSS精灵生成器。构建用于与Laravel模型一起使用，但也可以单独使用。

此工具

基于（数据库）条目生成单个精灵图像，使用ImageMagick库，
准备一个CSS文件（包括每个图标的独特类），
可选地创建一个示例HTML文件以演示使用。

🙋 生成的精灵将被缩放到在视网膜显示上看起来很好。所以请确保使用两倍的图标宽度（iconWidth）和高度（iconHeight）大小（如果你想以32x32图标显示，请使用64x64）。

话虽如此，仍然可以在保持从精灵中获取的背景图像的同时，动态更改图标CSS的宽度和高度值。

因此，您可以根据需要定义自己的@media规则来使用不同尺寸的相同精灵。

安装

composer require sahtepetrucci/responsive-retina-css-sprites

使用

为了使此功能正常工作，您需要提供包含id和icon字段的对象集合。

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

示例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

输出

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（可选）

<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>

示例2（在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);

在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

示例图标来自icons8.com。

sahtepetrucci / responsive-retina-css-sprites

维护者

详细信息

README

安装

使用

示例1

输出

示例2（在Laravel中生成精灵）

在Blade中使用精灵