jameslevi/sprite

是一个用于Web开发的简单图像到精灵编译工具。

维护者

详细信息

github.com/jameslevi/sprite

主页

源代码

问题

安装: 17

依赖项: 0

建议者: 0

安全: 0

星标: 2

关注者: 2

分支: 0

开放问题: 0

v1.0.9 2021-04-22 10:46 UTC

Requires

MIT aa20778520f72bc322aa10f456f6af42efdac3ef

iconssprite

This package is not auto-updated.

Last update: 2024-09-20 04:03:46 UTC

README

是一个用于Web开发的简单图像到精灵编译工具。

特性

  1. 支持png, gif, jpg, bmp和webp图标。
  2. 自动为每个图标生成CSS类。
  3. 轻松与任何Web项目集成。

安装

  1. 您可以通过composer安装。
composer require jameslevi/sprite --dev
  1. 将vendor/jameslevi/atmos文件夹中的atmos文件复制到您的根目录。
  2. 在您的根目录中创建一个名为commands的新文件夹。

入门

  1. 创建一个名为"sprite"的新atmos命令文件。
php atmos --make sprite
  1. 打开commands文件夹中的Sprite.php文件，并添加一个名为"generate"的新受保护方法。
/**
 * Method to generate sprite image and stylesheet.
 *
 * @param  array $arguments
 * @return void
 */

protected function generate(array $arguments)
{
     
}
  1. 在generate方法内部尝试以下代码。
// Create new instance by setting sprite name and asset location.
$sprite = new Sprite("test", __DIR__ . "/../resources/icons");

// Set where to save the generated sprite image.
$sprite->setGeneratedImagePath(__DIR__ . "/../public/img");
$sprite->setImageBaseURL("/../img");

// Set where to save the generated css file.
$sprite->setGeneratedCSSPath(__DIR__ . "/../public/css");

$sprite->generate();
  1. 在您的终端中运行以下命令以生成精灵。
php atmos sprite:generate
  1. 将生成的CSS文件添加到您项目的head部分。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/sprite-test.css">
</head> 
<body>
  
</body>
</html>
  1. 您可以使用以下模式通过CSS类访问每个图标：sprite-{sprite name}-{icon name}。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/sprite-test.css">
</head> 
<body>
 
    <div class="sprite-test sprite-test-icon1"></div>
    <div class="sprite-test sprite-test-icon2"></div>
    <div class="sprite-test sprite-test-icon3"></div>
 
</body>
</html>
  1. 如果需要向图标集中添加新图标，只需运行generate命令，它将再次生成新的精灵图像和样式表。

最佳实践

  1. 在每个精灵集中，请确保所有图标类型和尺寸相同。
  2. 在命名图标时不要添加空格，而是使用连字符来分隔单词。
  3. 不要将您的资源文件夹放在public目录中。

贡献

对于错误报告和建议，您可以发送电子邮件至nerdlabenterprise@gmail.com联系James Levi Crisostomo。

许可

此软件包是开源软件，许可协议为MIT许可。