最受欢迎SVG图标库揭秘！为 React 应用注入矢量动力！

SVG(可缩放矢量图形) 令人印象深刻的可扩展性背后的秘密在于，它使用数学计算而不是像素来生成图像，从而确保图像无论分辨率如何都能保持其锐度和清晰度。

在React中，使用SVG图标是一种常见的做法，它可以提供丰富的图标资源并保持应用的灵活性和可扩展性。你可以使用本地SVG图标，或者直接使用第三方插件的图标，今天就介绍几个React中使用最多的SVG图标库，并讨论如何在React应用程序中集成和使用它。

本地SVG

在介绍图标库之前先了解一下本地SVG的使用方式，如果你不想使用第三方图标插件可以使用本地SVG图标。

`img`标签的`src`属性

使用es module引入一个静态资源会返回解析后的公共路径。

js 复制代码

import reactLogo from './assets/react.svg';

<img src={reactLogo} className="logo react" alt="React logo" />

这种方式就是把SVG作为图片使用，这种方法限制了自定义选项，导入的 SVG 只可以设置一些图片的基本属性，如果您需要进行调整，这可能是一个显着的缺点。

嵌入JSX

js 复制代码

function App() {
  return (
    <div>
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
    </div>
  );
}

注意，如果你使用这种方式使用的话，那SVG就是一个DOM元素，而这个DOM元素的类型是SVGProps<SVGSVGElement>，而原本在.svg文件里面的一些属性需要修改，比如说xmlns:xlink需写成xmlnsXlink，class需写成className。

并且这种方式会让JSX结构变得相当复杂。

组件方式

使用组件优化了JSX结构。

js 复制代码

// MySvgIcon.tsx
const MySvgIcon = () => (
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
);

export default MySvgIcon;


//组件方式使用
<MySvgIcon />

vite-plugin-svg-icons

该库用于生成 svg 雪碧图，有以下特性：

预加载 在项目运行时就生成所有图标,只需操作一次 dom
高性能 内置缓存,仅当文件被修改时才会重新生成

4步使用该库：

步骤1：安装

shell 复制代码

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

步骤2：vite.config.ts 中配置插件

js 复制代码

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
          // 指定需要缓存的svg图标文件夹
          iconDirs: [resolve(process.cwd(), "src/assets/icons")],
          // 指定symbolId格式
          symbolId: "icon-[dir]-[name]",
      }),
    ],
  }
}

将所有SVG图标放在src/assets/icons 文件夹下，例如icon1.svg

步骤3：在 src/main.ts 内引入注册脚本

js 复制代码

import 'virtual:svg-icons-register'

步骤4：创建组件，在组件中使用

js 复制代码

export default function SvgIcon({
  name,
  prefix = 'icon',
  color = '#333',
  ...props
}) {
  const symbolId = `#${prefix}-${name}`

  return (
    <svg {...props} aria-hidden="true">
      <use href={symbolId} fill={color} />
    </svg>
  )
}


// 组件内使用
import SvgIcon from './components/SvgIcon.vue'
<SvgIcon name="icon1"></SvgIcon>

言归正传，下面正式介绍SVG图标库！

React Icons

React Icons通过提供大量高质量、易于使用的 SVG 图标，并支持多种图标集，如FontAwesome、MaterialIcons 等，这个库的特点包括：

轻量化：通过动态导入的方式减少打包时的体积，实现按需加载，降低页面加载时间并提高应用性能。
模块化：每个图标都是一个独立的 React 组件，可以按需引入。
多图标集支持：包含常用的 Font Awesome 和 Material Icons，还支持 Ionicons、Octicons 等多种图标集。
自定义样式：允许自由调整图标的大小、颜色和其他 CSS 属性，以适应不同的 UI 风格。
适用于多种场景：包括 Web 应用界面、移动应用开发，以及原型设计。

shell 复制代码

yarn add react-icons

想用哪里点哪里！

此外，React Icons 还支持 TypeScript 并提供了一些有用的属性，如 color、size、className 和 style，以实现图标的样式定制。如果你正在寻找一个易于集成、高效的图标解决方案，React Icons 是一个很好的选择。

iconify

Iconify 提供了一个统一的 API 来使用多个图标集，包括流行的图标集如 FontAwesome、Material Icons、Eva Icons 等。Iconify 的目标是简化图标的使用，让开发者能够在各种项目中轻松地集成和使用图标。这个库的特点包括：

按需加载：支持按需加载，有助于减少应用的体积和提高加载速度。
多种图标源：支持从多个源导入图标，包括本地文件、在线图标集和自定义图标集。
可定制性：允许开发者通过 CSS 定制图标的颜色、大小和其他样式属性。
兼容性 ：Iconify 与各种前端框架和库兼容，如 React、Vue、Svelte 等。

shell 复制代码

yarn add @iconify/react

你可以使用Icon或InlineIcon组件，导入 Icon 组件，在 icon 属性中设置 icon，直接使用图标；或者先导入图标再使用

js 复制代码

import { Icon } from '@iconify-icon/react';
import alertIcon from '@iconify-icons/mdi-light/alert';

export function Alert() {
  return (
    <div>
      <Icon icon="mdi-light:alert" />
      
      <Icon icon={alertIcon} />
    </div>
  );
}

图标集合：icon-sets.iconify.design/

Ant Design Icons

Ant Design Icons 是由蚂蚁金服推出的一套图标库，虽说是 Ant Design 设计语言的一部分，但是旨在为用户提供一套高质量、一致性、可定制的图标资源，也有不少优点，并且图标种类也很多。有以下特点：

一致性：遵循 Ant Design 的设计语言，确保图标风格与 Ant Design 组件库保持一致。
可定制性：图标支持多种样式定制，包括颜色、大小、旋转角度等，以适应不同的设计需求。
易于使用：提供了 React 组件和 SVG 两种使用方式，方便在不同的前端项目中集成。
多端兼容：不仅适用于 Web 应用，还可以在移动应用和桌面应用中使用。
国际化：图标库包含多种语言的图标，支持国际化项目的需求。

shell 复制代码

npm install @ant-design/icons --save

js 复制代码

import React from 'react';
import { HomeOutlined, LoadingOutlined, } from '@ant-design/icons';
import { Space } from 'antd';

const App: React.FC = () => (
  <Space>
    <HomeOutlined />
    <LoadingOutlined />
  </Space>
);

export default App;

除基本用法外，还有多色图标、自定义图标、与iconfont.cn结合等多种使用方式。

Material Icons

Material UI 是一个开源的 React 组件库，它们是 Material Design 系统的一部分。功能全面，开箱即用，可以在生产中使用。Material UI的一些特点：

一致性：图标设计确保在不同尺寸下均清晰可读，优化了在所有常见平台和显示分辨率上的显示效果。
多种格式：图标以多种格式提供，适用于不同类型的项目和平台，包括 Web、Android 和 iOS。
开放许可 ：图标在 Apache License Version 2.0 下可用，允许在产品中自由混合和重新共享。

shell 复制代码

yarn add @mui/icons-material

Google 已经创建了 2,100 多个官方 Material 图标，对于每个 SVG 图标，我们从包中 @mui/icons-material 导出相应的 React 组件。您可以搜索这些图标的完整列表:mui.com/material-ui... 。

使用以下两个选项之一导入图标：

js 复制代码

//方式一
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
import ThreeDRotation from '@mui/icons-material/ThreeDRotation';

//方式二
import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

<AccessAlarm />
<ThreeDRotation />

开发者在选择SVG图标库时，应该考虑图标的多样性、易用性、性能和可定制性等因素。根据项目的具体需求和个人喜好，选择最适合的图标库来提升应用的用户体验和界面美观度。大家平时都用过哪些图标库呢？欢迎评论区留言！

今天的分享就到这里，希望可以帮助到你！假如你对文章感兴趣，可以来我的公众号：小新学研社。

最受欢迎SVG图标库揭秘！为 React 应用注入矢量动力！

本地SVG

img标签的src属性

嵌入JSX

组件方式

vite-plugin-svg-icons

React Icons

iconify

Ant Design Icons

Material Icons

`img`标签的`src`属性