在您的Django和Jinja模板中使用heroicons。
项目描述
在您的Django和Jinja模板中使用 heroicons。
通过我的书籍提高您的Django和Git技能 （书籍链接）。
需求
支持Python 3.8到3.12。
支持Django 3.2到5.1。
用法
heroicons 包支持Django模板和Jinja模板。请按照以下适当的指南进行操作。
Django模板
使用 python -m pip install heroicons[django] 进行安装。
将其添加到您的 INSTALLED_APPS
INSTALLED_APPS = [ ..., "heroicons", ..., ]
现在您可以使用以下命令加载模板库
{% load heroicons %}或者，通过将其添加到 内置选项 来在所有模板中提供库
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
# ...
"OPTIONS": {
# ...
"builtins": [
...,
"heroicons.templatetags.heroicons",
...,
],
},
}
]该库提供以下标签以渲染具有相应样式的SVG图标
heroicon_micro
heroicon_mini
heroicon_outline
heroicon_solid
标签接受以下参数
name，位置参数：要使用的图标名称。您可以在 heroicons.com 网格 上查看图标名称。
size，关键字参数：一个整数，将用于输出 <svg> 标签的宽度和高度属性。默认为图标设计的尺寸：轮廓和实心为 24，迷你为 20，微小型为 16。可以是 None，在这种情况下，将不输出宽度和高度属性。
任意数量的关键字参数。这些将被添加为输出 HTML 中的属性。属性名称中的下划线将被替换为短横线，允许您定义例如 data- 属性。
大多数属性将被添加到包含图标的 <svg> 标签中，但这些属性将附加到内部 <path> 标签上。
stroke-linecap
stroke-linejoin
vector-effect
注意：与您可以从 heroicons.com 复制的 SVG 代码不同，没有默认的 class。
示例
轮廓“academic-cap”图标
{% heroicon_outline "academic-cap" %}相同的图标，实心，大小为 40x40 像素，并有一个 CSS 类
{% heroicon_outline "academic-cap" size=40 class="mr-4" %}再次使用该图标，但将路径更改为更窄的描边宽度，并声明了“data-controller”属性
{% heroicon_outline "academic-cap" stroke_width=1 data_controller="academia" %}Jinja 模板
使用 python -m pip install heroicons[jinja] 安装。
调整您的 Jinja Environment 以添加来自 heroicons.jinja 的全局 heroicon_* 函数。例如
from heroicons.jinja import ( heroicon_micro, heroicon_mini, heroicon_outline, heroicon_solid, ) from jinja2 import Environment env = Environment() env.globals.update( { "heroicon_micro": heroicon_micro, "heroicon_mini": heroicon_mini, "heroicon_outline": heroicon_outline, "heroicon_solid": heroicon_solid, } )
现在在您的模板中，您可以调用这些函数，这些函数根据图标集的图标样式渲染 <svg> 图标。这些函数接受以下参数
name，位置参数：要使用的图标名称。您可以在 heroicons.com 网格 上查看图标名称。
size，关键字参数：一个整数，将用于输出 <svg> 标签的宽度和高度属性。默认为图标设计的尺寸：轮廓和实心为 24，迷你为 20，微小型为 16。可以是 None，在这种情况下，将不输出宽度和高度属性。
任意数量的关键字参数。这些将被添加为输出 HTML 中的 HTML 属性。属性名称中的下划线将被替换为短横线，允许您定义例如 data- 属性。
大多数属性将被添加到包含图标的 <svg> 标签中，但这些属性将附加到内部 <path> 标签上。
stroke-linecap
stroke-linejoin
vector-effect
注意：与您可以从 heroicons.com 复制的 SVG 代码不同，没有默认的 class。
示例
轮廓“academic-cap”图标
{{ heroicon_outline("academic-cap") }}相同的图标，实心，大小为 40x40 像素，并有一个 CSS 类
{{ heroicon_solid("academic-cap", size=40, class="mr-4") %}再次使用该图标，但将路径更改为更窄的描边宽度，并声明了“data-controller”属性
{{ heroicon_outline("academic-cap", stroke_width=1, data_controller="academia") %}命令行界面 (CLI)
在 heroicons 的第 2 版中，许多图标已被重命名。为了帮助您从第 1 版迁移，此软件包包含一个 CLI，可以更新您的 heroicons 模板标签。
像这样调用 CLI
$ python -m heroicons update <filename> <filename2> ...要对其所有模板文件运行它，您可以使用 git ls-files | xargs
$ git ls-files -- '*.html' | xargs python -m heroicons update该工具将根据 heroicons 发布说明 中的表格更新已重命名的图标名称。它应该找到 Django 和 Jinja 模板标签
-{% heroicon_outline "archive" class="mr-2" %}
+{% heroicon_outline "archive-box" class="mr-2" %}
-{{ heroicon_solid("archive", class="mr-2") }}
+{{ heroicon_solid("archive-box", class="mr-2") }}另外请注意，solid 图标将默认大小从 20px 更改为 24px。如果您没有指定大小，它们现在将更大，这可能会破坏某些设计。您可以通过指定它来保留 v1 的大小
{% heroicon_solid "archive-box" size=20 %}{{ heroicon_solid("archive-box", size=20) }}或通过其他机制
由于调整图标大小的方法有很多，因此很遗憾，无法自动将大小添加到未指定大小的实心图标中。
祝您好运，愿您好运连连。
下载文件
下载适用于您的平台的文件。如果您不确定选择哪个，请了解有关安装包的更多信息。