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