Material Icons 开源项目使用教程

Material Icons 开源项目使用教程

material-iconsUpdated version of Google Material Design Icons from material.io. Each icon comes in 5 variations: baseline, sharp, outline, round, two tone.项目地址:https://gitcode.com/gh_mirrors/mat/material-icons

1. 项目的目录结构及介绍

Material Icons 项目的目录结构如下：

material-design-icons/
├── src/
│   ├── action/
│   ├── alert/
│   ├── av/
│   ├── ...
│   └── maps/
├── png/
│   ├── 1x/
│   ├── 2x/
│   └── ...
├── sprites/
├── iconfont/
└── LICENSE

目录介绍：

• src/: 包含所有图标的源文件，按类别分目录存放。例如，地图图标存放在 src/maps/ 目录下。
• png/: 包含所有图标的 PNG 格式文件，分为不同密度（1x 和 2x）。
• sprites/: 包含用于创建图标雪碧图的文档和工具。
• iconfont/: 包含所有图标的字体文件。
• LICENSE: 项目的许可证文件，遵循 Apache License 2.0。

2. 项目的启动文件介绍

Material Icons 项目没有传统意义上的“启动文件”，因为它主要是一个图标库，供开发者下载和集成到他们的项目中。开发者可以根据需要下载 SVG、PNG 或字体文件，并将其集成到自己的项目中。

3. 项目的配置文件介绍

Material Icons 项目没有特定的配置文件，因为它主要是一个静态资源库。开发者可以根据需要下载和使用图标，无需进行复杂的配置。

字体文件的集成示例：

如果开发者选择使用字体文件，可以按照以下步骤进行集成：

1. 下载字体文件：从项目的 iconfont/ 目录下载字体文件。
2. 引入字体文件：在 CSS 文件中引入字体文件，并定义字体样式。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* 首选图标大小 */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

通过以上步骤，开发者可以将 Material Icons 集成到自己的项目中，并使用 CSS 样式来渲染图标。

material-iconsUpdated version of Google Material Design Icons from material.io. Each icon comes in 5 variations: baseline, sharp, outline, round, two tone.项目地址:https://gitcode.com/gh_mirrors/mat/material-icons