HTML前端开发-- Iconfont 矢量图库使用简介
一、SVG 简介及基础语法
1. SVG 简介
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于在网页上显示二维图形。SVG 图形可以无限缩放而不会失真，非常适合用于图标、图表和复杂图形。SVG 文件是文本文件，可以在任何文本编辑器中打开和编辑。
2. SVG 的优点
- 可缩放性：SVG 图形可以无限放大或缩小，而不会失真。
- 高质量：SVG 图形在任何分辨率下都能保持高质量。
- 可编辑性：SVG 文件是文本文件，可以使用任何文本编辑器进行编辑。
- 动画支持：SVG 支持复杂的动画效果。
- 搜索引擎友好：SVG 文件中的文本内容可以被搜索引擎索引。
3. SVG 的基本语法
SVG 使用 XML 格式来描述图形。以下是一些常用的 SVG 元素：
- <svg>：定义 SVG 画布。
- <rect>：绘制矩形。
- <circle>：绘制圆形。
- <ellipse>：绘制椭圆。
- <line>：绘制直线。
- <polyline>：绘制多条线段。
- <polygon>：绘制多边形。
- <path>：绘制任意路径。
- <text>：添加文本。
4. 示例代码
以下是一个简单的 SVG 示例，展示了如何绘制一个矩形和一个圆形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="50" fill="blue" />
<circle cx="150" cy="100" r="50" fill="red" />
</svg>
二、项目中使用 Iconfont 库
1. Iconfont 简介
Iconfont （阿里巴巴矢量图标库）是一个提供丰富图标资源的平台，提供了大量的免费图标资源。通过 Iconfont，开发者可以轻松地将图标集成到项目中，支持多种格式，包括 SVG、Font 等。
2. 为什么选择 Iconfont
- 丰富的图标资源：Iconfont 提供了数万个免费图标，涵盖了各种应用场景。
- 易于集成：Iconfont 提供了多种集成方式，包括在线生成代码、下载图标文件等。
- 可定制性：用户可以根据需要自定义图标颜色、大小等属性。
- 性能优化：Iconfont 生成的图标文件体积小，加载速度快。
3. 如何使用 Iconfont
3.1 注册并创建项目
- 访问 Iconfont 官网 并注册账号。
- 创建一个新的项目，并为项目命名。
3.2 选择图标
- 在素材库页面中，选择需要的图标，点击“加入购物车”。
- 点击“购物车”，选择需要的图标并添加到项目中。
3.3 项目中引入
官方引入文档：查看
以 symbol 引用 方式进行总结
- 在项目页面中，点击“添加至项目”按钮。
- 选择“在线生成代码”或“下载图标文件”。
- 如果选择“在线生成代码”，可以选择生成 HTML、CSS 或 SVG 代码。
- 新建
iconfont.js文件，拷贝项目下面生成的symbol代码，使用 js 引入页面
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
- 加入通用css代码（引入一次就行）：
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
icon-xxx 为 js文件中的 图片id
