jtolj/simple-blade-heroicons

在 Blade 模板中使用 Heroicons 的简单方法。

维护者

详细信息

github.com/jtolj/simple-blade-heroicons

主页

源代码

问题

安装量: 33,377

依赖关系: 0

建议者: 0

安全: 0

星标: 3

关注者: 1

分支: 2

开放问题: 0

语言：Blade

v2.1.2 2024-04-16 14:30 UTC

Requires

MIT 88f72e6a3342f9021fe180e2ef9a686746d1070c

  • Jesse Tolj <jesse.woop@objectfactory.io>

laravelbladeHeroicons

This package is auto-updated.

Last update: 2024-09-16 15:22:38 UTC

README

Heroicons 是由 Steve Schoger 和 Adam Wathan 开发的一套图标。

本包是 blade-ui-kit/blade-heroicons 的轻量级替代品，它只是简单地用匿名 Blade 组件包装每个 SVG。

本包版本使用 Heroicons 2。

要求

  • PHP 7.3 或更高版本
  • Laravel 7.14 或更高版本

安装

composer require jtolj/simple-blade-heroicons

可选：发布配置文件

php artisan vendor:publish --tag=simple-blade-heroicons-config

使用方法

可以通过使用生成的匿名组件将图标包含在 Blade 模板中。

您可以在 https://heroicons.com/ 查看可用图标的列表。

对于 24x24 轮廓版本，在名称前缀加上 o-。

对于 24x24 实心填充版本，在名称前缀加上 s-。

对于 20x20 迷你实心版本，在名称前缀加上 ms-。

对于 20x20 微型实心版本，在名称前缀加上 mis-。

<x-heroicon::o-exclamation-circle />
<x-heroicon::s-exclamation-circle />
<x-heroicon::ms-exclamation-circle />
<x-heroicon::mis-exclamation-circle />

属性

所有属性都传递给 SVG 标签。

例如

<x-heroicon::o-arrow-up aria-description="An arrow pointing up" class="text-gray-500">

在浏览器中将渲染为

<svg aria-description="An arrow pointing up" class="text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
</svg>

动态组件

还提供了一个动态图标组件。可以通过“icon”属性传递图标名称。

例如

@php
  $iconName = 'o-arrow-up';
@endphp
<x-heroicon::icon icon="{{ $iconName }}" />

<use href="#id"> 支持

本包版本支持使用图标的引用而不是每次在 Blade 中使用组件时输出完整的 SVG 内容。

这导致当在页面上重复使用相同的图标时，DOM 的体积显著减小。

要使用此功能，首先将以下内容添加到您的 layout.blade.php 文件中 在您的 </body> 标签之前

<body>
    ...contents...
    <x-heroicon::defs />
</body>

然后，您可以选择将 'use_references' 配置选项更新为 true 以默认使用引用，或者设置渲染图标时的 push-ref 属性为 true。

<x-heroicon::o-arrow-up :push-ref="true" />

JavaScript 框架

要使用本包中的图标与 JavaScript 框架，按照上述说明设置 <x-heroicon::defs> 组件。

接下来，将图标列表传递给提供的 <x-heroicon::iconset> 组件。这必须在模板中的 <x-heroicon::defs> 之前出现。

您列出的图标将可在您的 JavaScript 组件中引用。

一个简单的 Vue.js 示例

<html>
<head>
...
</head>
<body>
    <x-heroicon::iconset :icons="['o-arrow-up', 'o-arrow-down', 'o-arrow-left', 'o-arrow-right']" />
    <div id="vue-app"></div>
    <x-heroicon::defs />
</body>

// Heroicon.vue
<script>
export default {
  props: {
    icon: String
  },
  computed: {
    fill() {
      return this.icon.startsWith('o') ? 'none' : 'currentColor';
    },
    stroke() {
      return this.icon.startsWith('o') ? 'currentColor' : null;
    },
    strokeWidth() {
      return this.icon.startsWith('o') ? '1.5' : null;
    },
    reference() {
      return '#heroicon-' + this.icon;
    },
    viewBox() {
      if (this.icon.startsWith('mi')) {
        return '0 0 16 16';
      } elseif (this.icon.startsWith('m')) {
        return '0 0 20 20';
      } else {
        return '0 0 24 24';
      }
    },
  }
}
</script>
<template>
   <svg
      xmlns="http://www.w3.org/2000/svg"
      :viewBox="viewBox"
      :fill="fill"
      :stroke="stroke"
      :stroke-width="strokeWidth"
      >
      <use :href="reference" />
    </svg>
</template>

// MyComponent.vue
import Heroicon from './Heroicon.vue';
<script>
export default {
  components: {
    Heroicon
  }
}
</script>

<template>
  <heroicon :icon="o-arrow-up" class="h-5 w-5 text-gray-500" />
  <heroicon :icon="o-arrow-down" class="h-5 w-5 text-gray-500" />
  <heroicon :icon="o-arrow-left" class="h-5 w-5 text-gray-500" />
  <heroicon :icon="o-arrow-right" class="h-5 w-5 text-gray-500" />
</template>