README

一个简单的Symfony扩展包，提供名为'heroicon'的Twig扩展，以自动获取所有Heroicons svg图标。该扩展包依赖于tailwindlabs/heroicons节点包以获取svg图标。

安装
使用
配置

a. 默认配置

b. Webpack配置

安装

首先，通过Composer安装此包

composer require yalit/twig-heroicon-bundle

然后，在您的config/bundles.php文件中启用该扩展包

// config/bundles.php
<?php 

return [
    // ...
    Yalit\TwigHeroiconBundle\TwigHeroiconBundle::class => ['all' => true],
];

然后，使用您喜欢的包管理器安装tailwindlabs/heroicons节点包（此处以npm为例）

npm install taiwindlabs/heroicons

使用

使用非常简单，您可以在您的twig模板中使用heroicon函数来获取svg图标。该函数具有以下签名

{{ heroicon('name', 'type', 'size', 'classname') }}

其中

name是一个字符串，代表图标的名称（必需）
type是一个字符串，代表图标的类型（可选）=> 可能的值是'outline'和'solid'（请参阅https://heroicons.com/）
size是一个字符串，代表图标的尺寸（可选）=> 可能的值是'24', '20', '16'（请参阅https://heroicons.com/）
- 对于尺寸16和20，图标仅在'solid'类型中可用（请参阅https://heroicons.com/）
classname是一个字符串，代表图标的类名（可选，默认不指定特定类）

以下是如何使用此函数的示例

{{ heroicon('academic-cap', 'solid', '20', 'text-red-500') }}

配置

默认配置

扩展包可以被配置以更改

图标的默认显示类型
- 此值在heroicon函数中没有提供type时使用
- 可能的值是'outline'和'solid'
图标的默认尺寸
- 此值在heroicon函数中没有提供size时使用
- 可能的值是'24', '20', '16'（请参阅上面的可能组合类型）
Webpack配置
- 如果您想使用Webpack构建从构建文件夹获取图标
- 构建文件夹默认为'public/build'

以下是扩展包的默认配置

twig_heroicon:
    default_display_type: 'outline'
    default_size: '24'
    webpack:
      enabled: false
      build_dir: 'public/build'

Webpack配置

默认配置直接从node_modules/heroicons文件夹中获取svg图标，需要保持该文件夹在项目中。如果您只想使用所需的图标并从Webpack构建中获取它们，可以将源更改为'webpack'并添加以下配置

twig_heroicon:
    source: 'webpack'

然后，您需要在您的webpack.config.js文件中添加以下配置

const TwigHeroiconPlugin = require("./vendor/yalit/twig-heroicon-bundle/assets/twigHeroiconPlugin");

Encore
    // ...
    .addPlugin(new TwigHeroiconPlugin())

此配置将所需svg图标从node_modules/heroicons文件夹复制到public/build文件夹，然后Twig扩展将从那里获取图标。

Webpack插件选项

默认情况下，此插件（在构建期间）将查看模板文件夹以查找所有twig文件并获取在heroicon函数中使用的所有所需图标。
它也可以从node_modules/heroicons文件夹获取特定图标的列表。

可以传递以下选项到插件，以下是默认配置

 {
    templatePaths: ["templates"], 
    defaultSize: "24", 
    defaultDisplayType: "outline",
    importType: 'twig', 
    importedHeroicons: [] 
}

其中

templatePaths 是一个字符串数组，用于查找模板根目录中的twig文件路径
- 默认值是 ["templates"]
defaultSize 是一个字符串，表示图标的默认大小 => 如果在 heroicon 函数中没有提供大小，则这将是从中获取的图标大小
- 可能的值是'24', '20', '16'（请参阅上面的可能组合类型）
defaultDisplayType 是一个字符串，表示图标的默认显示类型 => 如果在 heroicon 函数中没有提供类型，则这将是从中获取的显示类型
- 可能的值是'outline'和'solid'
importType 是一个字符串，表示导入的类型
- 'twig' 仅查看 templatePaths 数组中提到的文件夹中的twig文件
- 'specific' 仅查看 importedHeroicons 数组以获取图标
- 'both' 将结合上述两种
importedHeroicons 是一个字符串或对象数组
- 如果 importType 是 'specific'，则此数组将用于获取图标
- 如果它是一个字符串，它必须是一个有效的图标名称，并使用默认大小和默认显示类型
- 如果它是一个对象，则它必须具有以下属性
  - name是一个字符串，代表图标的名称（必需）
  - displayType 是一个字符串，表示图标类型（必需）=> 可选值是 'outline' 和 'solid'（参见 https://heroicons.com/）
  - size 是一个 字符串，表示图标大小（必需）=> 可选值是 '24', '20', '16'（参见 https://heroicons.com/）

这些选项可以像这样传递给 addPlugin 函数

.addPlugin(new TwigHeroiconPlugin({
    importType: 'both',
    importedHeroicons: [
        {name: 'academic-cap', displayType: 'solid', size: '20'},
        'adjustments-vertical',
    ]    
}))

**注意**: 如果在webpack配置中更改构建目录，则需要将bundle webpack配置中的 build_dir 更改为相同的值（参见上面）。

注意 : 如果使用webpack配置，则可以将tailwindlabs/heroicons包作为开发依赖项安装

npm install taiwindlabs/heroicons --save-dev

yalit / twig-heroicon-bundle

维护者

详细信息

README

安装

使用

配置

默认配置

Webpack配置

Webpack插件选项