拥抱 Bootstrap Icons

Bootstrap 官方出品的图标库：

https://icons.getbootstrap.com/

https://icons.bootcss.com/

提供 webfont 和 svg 两种格式，目前最新版本是 1.11.3，图标多达2050个！调用方式也有很多种（参考上面链接文档），我更喜欢页面使用 SVG 元素内的xlink扩展属性指向外部 SVG 资源合集的方式，因为外部资源可以在浏览器端缓存，节省资源，稍微加工一下，还可以定制（注册）所需要的图标，打包成一个 SVG 合集文件，无需加载体积超大的包含2050个图标的SVG库。由于项目所需要用到的图标远远少于2050个，因此这个 SVG 合集将会很小，再经过服务器 gzip 压缩后就更小了。

------加工过程------

步骤：

1、在项目根目录新增文件 bi.json：

{
    "version": "1.11.3",
    "svg_url": "/Home/svg",
    "bi_svg": "bootstrap-icons.svg",
    "svg_raw_output_ifnotregistered": false,
    "icons": [
        "emoji-sunglasses-fill",
        "calendar3",
        "list-ul",
        "heart-fill",
        "0-circle",
        "file-richtext-fill",
        "chevron-left",
        "chevron-right"
}

svg_url 表示前端页面引用 svg 图标库的url位置。bi_svg 表示 BootstrapIcons 官方发布的源文件的路径，svg_raw_output_ifnotregistered 表示如果页面调用了未注册的图标，是否要使用SVG源码输出，建议使用false。如果设为true，第2步的Bi类实例在初始化时会把所有图标都加载到实例的私有属性，会增加服务器内存的占用量，而且输出的SVG源码也会让页面的html字符串大大增加，不利于网络传输。icons 表示注册的图标 id（项目所需用到的图标Id）。

vs 中右键点击 bi.json 选择属性，复制到输出目录设置为”如果较新则复制“。

2、新增一个类Bi.cs，下载，类文件放在项目根目录。

3、从官方下载 Bootstrap-Icons.svg 合集文件，nuget 包里面包含这个合集文件，把该文件放在项目的根目录。vs 中右键点击该文件，选择属性，复制到输出目录设置为”如果较新则复制“。nuget包中的其他文件，比如2050个svg单独文件，这些都可以删除。

4、在 Program.cs 新增一行：

builder.Services.AddSingleton<Bi.SVG>();

注入Bi实例，使用单例模式。

5、打开 _ViewImports.cshtml 文件，新增一行：

@inject Bi.SVG icons

表示在所有视图文件都注入Bi实例，实例名称为icons。名称可以随意定义，后面调用时需要用到。

6、选一个控制器，比如HomeController.cs，新增一个方法：

public IActionResult svg()
    BiSvgOutput output = _bi.GetSVG();
    switch (output.StatusCode)
    case 304:
        return StatusCode(304);
    case 404:
        return StatusCode(404);
    default:
        return File(output.Output, "image/svg+xml", output.Last, output.Etag);
}

表示svg合集输出的方法：/Home/svg。该方法带有客户端缓存机制(Last-modified 和 Etag)。选择的控制器与入口方法名称，必须与 bi.json 中的 svg_url 配置一致。这一步表示初始化前端调用svg资源的入口。

5、在视图中这样调用图标：

@icons.Bi_Person_Fill

icons 实例包含2050个属性，属性名称就是 svg 图标的id名称。

如果调用了未注册的图标，根据配置 svg_raw_output_ifnotregistered 则得到源SVG（true），要么得到 null 空值（false）。

SVG（Scalable Vector Graphics）的全称是 可缩放的矢量图形 ，因此页面的CSS定义SVG的大小， 必须使用 width 和 height，而非 font-size 。另外由于SVG 的 mime type 是 image/svg-xml ，因此 IIS 服务器需要对该类型开启gzip压缩：

a: 打开服务器文件：C:\Windows\System32\inetsrv\config\applicationHost.config

b: 找到节点 httpCompression，给动态压缩和静态压缩都增加一行：

<add mimeType="image/svg+xml" enabled="true" />

2024-01-31 ASP.NET CORE