Material Design 中如何实现自定义图标库？完美解决方案！

Material Design 是 Google 推出的一种设计语言，旨在提供一致、美观、易用的用户界面设计。在 Material Design 中，图标是一个重要的设计元素。虽然 Material Design 已经提供了一些标准的图标，但是在实际项目中，我们经常需要使用自定义图标来满足特定的需求。本文将介绍如何在 Material Design 中实现自定义图标库，并提供完美解决方案。

一、Material Design 中的图标

在 Material Design 中，图标是一种矢量图形，可以在不失真的情况下缩放。Material Design 中提供了一些标准的图标，可以在 Material Icons 网站上查看。这些标准的图标使用了一些特殊的字体文件，可以直接在 HTML 中使用。

例如，要使用一个名为 add 的图标，可以在 HTML 中添加如下代码：

<i class="material-icons">add</i>

这将在页面上显示一个加号的图标。

二、自定义图标

如果需要使用自定义图标，可以使用一些矢量图形软件，例如 Adobe Illustrator、Sketch 等，绘制自己的图标。绘制完成后，需要将图标转换为 SVG 格式，这样才能在 Material Design 中使用。

1. SVG 格式

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形格式。使用 SVG 格式可以保证图标在不同大小的情况下保持清晰度。将图标转换为 SVG 格式的方法有很多种，例如使用 Adobe Illustrator 的导出功能，或者使用一些在线转换工具。

2. 命名规范

在 Material Design 中使用自定义图标时，需要遵循一些命名规范。每个图标都需要一个唯一的名称，并且名称需要符合以下规范：

• 名称只能包含小写字母、数字和下划线。
• 名称不能以数字开头。
• 名称不能与 Material Design 中的标准图标重名。

例如，如果要使用一个名为 my_custom_icon 的自定义图标，可以将 SVG 文件命名为 ic_my_custom_icon.svg。在 HTML 中使用该图标时，需要使用以下代码：

<i class="material-icons">my_custom_icon</i>

3. 图标大小

在 Material Design 中，图标的大小通常是 24dp（device-independent pixels，设备独立像素）。如果需要使用不同大小的图标，需要按比例缩放 SVG 文件。例如，如果要使用一个大小为 48dp 的图标，可以将 SVG 文件缩放为原来的两倍。

三、完美解决方案

使用自定义图标时，我们通常需要将多个图标组合在一起，形成一个图标库。在 Material Design 中，可以使用 IcoMoon 工具来创建自定义图标库。

IcoMoon 是一款在线图标制作工具，可以将多个 SVG 文件转换为一个图标库，并提供一些方便的工具来管理图标库。使用 IcoMoon 可以实现以下功能：

• 将多个 SVG 文件转换为一个图标库。
• 为图标库中的每个图标设置名称和颜色。
• 为图标库生成 CSS 文件，方便在 HTML 中使用。
• 支持自定义字体文件，可以使用自己的字体文件来替换默认的 Material Design 字体文件。

下面将介绍如何使用 IcoMoon 创建自定义图标库。

1. 导入 SVG 文件

首先，需要将多个 SVG 文件导入到 IcoMoon 中。可以将 SVG 文件拖放到 IcoMoon 界面中，也可以点击 Import Icons 按钮选择文件。导入完成后，IcoMoon 会将所有 SVG 文件显示在界面的左侧。

2. 设置名称和颜色

对于每个 SVG 文件，需要设置一个唯一的名称和一个颜色。可以在 IcoMoon 界面中为每个 SVG 文件设置名称和颜色。名称需要遵循 Material Design 的命名规范，颜色可以使用任意颜色。

3. 生成图标库

设置完名称和颜色后，需要将所有 SVG 文件打包成一个图标库。可以点击 Generate Font 按钮生成图标库。在生成过程中，可以选择使用哪些字体文件，以及是否生成 CSS 文件。

4. 使用图标库

生成图标库后，可以在 HTML 中使用该图标库。可以将生成的 CSS 文件引入到 HTML 中，然后在 HTML 中使用以下代码来显示图标：

<i class="icon-name"></i>

其中，icon-name 是在 IcoMoon 中设置的图标名称。

四、示例代码

下面是一个使用自定义图标库的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
	<title>Custom Icon Library</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css">
	<link rel="stylesheet" href="icomoon/style.css">
	<style>
		.icon {
			display: inline-block;
			width: 24px;
			height: 24px;
			fill: currentColor;
			stroke: none;
			stroke-width: 0;
			font-size: 24px;
			line-height: 1;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<!-- Using Material Design Icons -->
	<i class="mdi mdi-plus"></i>

	<!-- Using Custom Icon Library -->
	<i class="icon icon-my_custom_icon"></i>

	<script src="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/js/materialdesignicons.min.js"></script>
</body>
</html>

在这个示例代码中，我们引入了 Material Design Icons 和自定义图标库。使用 Material Design Icons 的方法与之前介绍的一样。使用自定义图标库时，我们定义了一个名为 icon 的 CSS 类，用于显示图标。在 HTML 中使用 icon 类和图标名称即可显示自定义图标。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d24b75a941bf713445bd5d