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 示例，展示了如何绘制一个矩形和一个圆形：

xml 复制代码

<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 引入页面

bash 复制代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

加入通用css代码（引入一次就行）：

html 复制代码

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

挑选相应图标并获取类名，应用于页面：