README

Laravel 的一键图标

此软件包使您能够非常简单地在 Laravel 项目中嵌入 SVG 图标。无需下载整个图标集，这将会使您的代码膨胀。它仅获取您想要的图标并将它们本地缓存 🚀

撰写本文时的信息

Heroicons (mini / outline / solid)
Font awesome (brands / regular / solid)
Material icons (default / outlined / round / sharp / twotone)

安装

只需在终端运行以下命令

composer require blinq/icons

用法

访问 https://icons.blinq.dev 并找到您想要的图标。

<x-icon id="banknotes@hero2/outline" class='w-6 h-6' />

<x-icon id="eye@fa6/regular" class='w-6 h-6' />

<x-icon id="account_circle@material/twotone" class='w-6 h-6' />

就是这样！第一次使用时，它将图标下载到您的资源文件夹中，之后将从此处加载。

配置

可选地，您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="blinq-icons:config"

这是发布配置文件的内容

return [
    /**
     * Set the download path for the icons
     */
    'download_path' => base_path('resources/svg'),
    /**
     * Sets the prefix for the blade components
     * x-icon becomes x-prefix-icon
     */
    'prefix' => null,
];

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="blinq-icons:views"

添加另一个图标包 & 贡献

您想添加另一个图标包吗？让我们以 Heroicons 为例。

您可以在以下位置找到 "academic-cap" 图标

https://raw.githubusercontent.com/tailwindlabs/heroicons/master/src/24/outline/academic-cap.svg

因此，下载基本路径是

https://raw.githubusercontent.com/tailwindlabs/heroicons/master/src

如果您想获取此 GitHub 仓库中所有可用的文件列表，可以使用以下 URL

https://api.github.com/repos/tailwindlabs/heroicons/git/trees/master?recursive=1

然后，我们需要将此列表转换为 blinq/icons 理解的格式。这种转换在自动创建的 discovery.json 文件中描述。

{
    "variants": [
        "mini",
        "outline",
        "solid"
    ],
    "icons": {
        "mini\/academic-cap.svg": {
            "url": "20\/solid\/academic-cap.svg"
        },
        "mini\/adjustments-horizontal.svg": {
            "url": "20\/solid\/adjustments-horizontal.svg"
        },
        ...

为了实现这一点，我们需要编写一些代码来将 GitHub trees 响应转换为 discovery.json 文件。请查看下面的 beforeDiscoveryFileCreated 方法。

在这种情况下，我们还需要调整 SVG 内容，以便它们与我们所应用的类协同工作。您可以在 beforeSvgFileCreated 方法中找到指导。

移除所有指定的宽度和高度，因为这些应该由图标的使用者来配置。
同样，移除所有指定的颜色。
将填充或描边设置为当前颜色，允许用户指定它。

这些操作可以合并到一个扩展 IconPack 的单个类中

<?php

namespace Blinq\Icons\Packs;

use Blinq\Icons\IconPack;
use Blinq\Icons\IconPackConfig;

/**
 * Heroicons icon pack
 * 
 * <x-icon id="icon name@namespace/variant" />
 * <x-icon id="banknotes@hero2/solid" />
 */
class Heroicons extends IconPack
{
    public function configure(IconPackConfig $config)
    {
        return $config
            /**
             * Some info the be showed at https://icons.blinq.dev
             */
            ->setName("Heroicons")
            ->setLicense("MIT")
            ->setDescription("Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.")
            ->setCopyright("By the makers of tailwindcss.com")
            ->setSite("https://heroicons.com")
            /**
             * The namespace is used to select this icon pack
             */
            ->setNamespace("hero2")
            ->setPath("https://raw.githubusercontent.com/tailwindlabs/heroicons/master/src")
            ->setDiscovery("https://api.github.com/repos/tailwindlabs/heroicons/git/trees/master?recursive=1")
            /**
             * The default variant is used when no variant is specified
             */
            ->setDefaultVariant("solid");
    }

    public $variantMapping = [
        '24/solid' => "solid",
        '24/outline' => "outline",
        '20/solid' => "mini",
    ];

    /**
     * Parses the github trees url and converts it into a discovery
     *
     * @param string $discoveryResponse
     * @return void
     */
    public function beforeDiscoveryFileCreated($discoveryResponse)
    {
        // Turn string into array
        $result = json_decode($discoveryResponse, true);

        // Get the tree
        $tree = $result['tree'] ?? null;

        // Filter the tree:
        $icons = collect($tree)
            // should start with src and end with .svg
            ->filter(fn($x) => str($x['path'])->startsWith('src') && str($x['path'])->endsWith('.svg'))
            // the url part of the discovery file. E.g: 20/solid/academic-cap.svg
            ->map(fn($x) => [ "url" => str($x['path'])->replaceFirst("src/", "")])
            // key by the variant and the icon.png. E.g: mini/academic-cap.svg
            ->keyBy(fn($x) => 
                ($this->variantMapping[(string) str($x['url'])->beforeLast('/')] ?? 'other') . "/" . str($x['url'])->afterLast('/')
            );

        // Create a unique list of variants
        $variants = $icons
            ->map(fn($x) =>  $this->variantMapping[(string) str($x['url'])->beforeLast('/')] ?? 'other')
            ->unique()
            ->values();

        // Combine them
        return [
            "variants" => $variants,
            "icons" => $icons,
        ];
    }
    
    public function beforeSvgFileCreated(&$localFile, $contents)
    {
        $isSolid = strpos($localFile, 'solid') !== false || strpos($localFile, 'mini') !== false;

        // Replace ALL occurences of width="??" with nothing
        $contents = preg_replace('/ width="[^"]*"/', '', $contents);
        // Replace ALL occurences of height="??" with nothing
        $contents = preg_replace('/ height="[^"]*"/', '', $contents);

        if ($isSolid) {
            // Replace all occurences of fill="??" with nothing
            $contents = preg_replace('/ fill="[^"]*"/', '', $contents);
            
            // Add fill="currentColor" after <svg
            $contents = preg_replace('/<svg/', '<svg fill="currentColor"', $contents);
        } else {
            // Replace stroke="#0F172A" stroke-width="1.5" with nothing
            $contents = preg_replace('/ stroke="[^"]*" stroke-width="[^"]*"/', '', $contents);
            // Replace fill="none" with stroke="currentColor" stroke-width="1.5"
            $contents = preg_replace('/<svg/', '<svg stroke="currentColor" stroke-width="1.5"', $contents);
        }

        // Write
        return $contents;
    }
}

然后，在服务提供程序中注册此类

IconPack::register(new Heroicons());

鼓励您创建一个带有 IconPack 类的 pull request，这样我就可以将其添加到这个仓库中。

变更日志

请参阅 CHANGELOG 以获取有关最近更改的更多信息。

致谢

Lennard

许可证

MIT 许可证 (MIT)。请参阅许可证文件以获取更多信息。

blinq / icons

维护者

详细信息

README

安装

用法

配置

添加另一个图标包 & 贡献

变更日志

致谢

许可证