在你的 React 开发者组合项目中使用 SVG 图标

您是否需要 React Web 项目中的图标,但不确定如何实现它们?我在我的个人作品集网站上使用 SVG 图标,并且最近更新了包含它们的方式。我想在本文中描述我选择的方法。什么是 SVG? SVG 是用于创建可缩放矢量图形的格式。这意味着您可以创建用矢量而不是像素定义的视觉效果。它们是其他光栅化图像格式(例如 JPG 和 PNG)的替代品(例如)。 JPG 和 PNG 等光栅化图形格式非常适合存

weixin_0010034

150人浏览 · 2022-08-06 04:26:22

weixin_0010034 · 2022-08-06 04:26:22 发布

您是否需要 React Web 项目中的图标,但不确定如何实现它们?我在我的个人作品集网站上使用 SVG 图标,并且最近更新了包含它们的方式。我想在本文中描述我选择的方法。

什么是 SVG?

SVG 是用于创建可缩放矢量图形的格式。这意味着您可以创建用矢量而不是像素定义的视觉效果。它们是其他光栅化图像格式(例如 JPG 和 PNG)的替代品(例如)。

JPG 和 PNG 等光栅化图形格式非常适合存储包含大量颜色变化的密集填充图像。例如,森林景观中的树叶、天空和地面分别有许多不同深浅的绿色、蓝色和棕色。使用 SVG 很难重新创建这样的场景。

SVG 的预期目的是创建更简单的图形;包含较少颜色和定义形状的图形。它们还提供了许多其他我们无法以基于像素的格式提供的好处。

为什么我们要使用 SVG?

SVG 提供了许多好处。它们的有效负载通常比 JPG 或 PNG 小,因为 SVG 存储为 XML。这允许我们的图形被索引。

SVG 是完全可扩展的,因为它们是用矢量设计的。这允许我们以任何分辨率放大、缩小和打印图形,并且图形仍然看起来清晰。

SVG 让我们能够更好地控制我们的图形以及我们如何使用代码对其进行转换。因为 SVG 以 XML 形式存储,所以我们可以在项目标记中与它进行交互。这使我们有可能使用 JavaScript 和 CSS 动态动画和转换我们的图形。

为我的 React 项目寻找 SVG

在我的作品集网站上,我使用了许多不同的 SVG 来突出显示我使用过的 Web 技术,并突出显示与我联系的方法(社交媒体、电子邮件、GitHub)。

[ Gatsby、WordPress、React 和 AWS 图标 ](https://res.cloudinary.com/practicaldev/image/fetch/s--iv8wnGai--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //s3-eu-west-2.amazonaws.com/ianholden.co.uk-wordpress-media/wp-content/uploads/2021/01/21091208/Screenshot-2021-01-21-at-09.11.40- 1024x297.png)

这些网络技术图标是描述用于创建我的投资组合网站的技术的 SVG。

从 Devicon 采购图标

我的第一个任务是获取我想在我的项目中使用的图标。本文适用于您想使用的任何 SVG,但是,如果您希望将图标用于 Web 开发组合,我不能高度推荐Devicon!

Devicon 提供了几种在您的项目中使用他们的图标的方法。

导入图标字体

您可以通过导入它们的 CSS 字体来访问 Devicon 中的所有图标。这是标记的<head>中的简单导入:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.9.0/devicon.min.css">

进入全屏模式退出全屏模式

要使用图标字体中的图标,您可以使用以下标记:

<i class="devicon-javascript-plain"></i></code></pre>

进入全屏模式退出全屏模式

这种方法很好,并且会奏效。然而,对于我的项目,它并没有提供我想要的那么大的灵活性。当我知道我只会使用 Devicon 的一些图标时,我也不喜欢为 CSS 样式表添加另一个 HTTP 请求的想法。

我选择使用另一种方法。

在自定义组件中使用原始 SVG

除了图标字体,Devicon 还通过其 GitHub 存储库或通过其网站界面将每个图标作为原始 SVG 提供。我选择在我的项目中使用原始 SVG 有几个原因:

它可以让我更好地控制我的代码中的 SVG;如果我愿意,允许我为图标设置动画。
通过将 prop 值合并到 SVG 中,我可以即时进行简单的更改。
我可以随意优化 SVG。

在我的 React 项目中实现 SVG 组件

创建 React 项目

我们的首要任务是创建一个新的 React 项目。为了速度,我们可以通过在命令行界面中运行以下命令来使用 create-react-app 模板:

npx create-react-app svg-dev-icons
cd svg-dev-icons

进入全屏模式退出全屏模式

从 Devicon 导入 SVG

从 Devicon 中找到您想使用的图标并将原始 SVG 复制到剪贴板。对于本教程,我们将使用 React 图标:

<svg viewBox="0 0 128 128">
  <g fill="#61DAFB">
    <circle cx="64" cy="64" r="11.4"></circle>
    <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z">
    </path>
  </g>
</svg>

进入全屏模式退出全屏模式

创建组件显示SVG

目录结构

创建几个目录,使您的文件结构如下所示:

/src
  /components
    /icons
      /svg

进入全屏模式退出全屏模式

反应.js

在新的/svg目录中,创建一个名为react.js的文件并添加以下代码:

import React from "react";

const Icon = ({color}) => (
  <svg viewBox="0 0 128 128">
    <g fill={color}>
      <circle cx="64" cy="64" r="11.4"></circle>
      <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path>
    </g>
  </svg>
);

export default Icon;

进入全屏模式退出全屏模式

这将是我们将 SVG 导入项目的方式。对于您想在项目中使用的每个新 SVG,您需要创建一个与上述类似的新 JS 文件,并将 SVG 内容替换为新图标的内容。

我们可以继续在我们的项目中使用这个组件,但是,我更喜欢创建一个容器来自定义 SVG 并添加额外的标记。

index.js

在我们的/icons目录中创建一个index.js文件。添加以下代码:

import React from "react";
import classNames from "classnames";
import ReactIcon from "./svg/react.js";

const tidy = (string) => string.toLowerCase().trim();

const getIcon = (name, color = "#494949") => {
  switch (tidy(name)) {
    case "react":
      return <ReactIcon color={color} />;
    default:
      return "";
  }
};

const Icons = ({ name, classes, color }) => (
  <div id={`${tidy(name)}-logo-icon`} className={classNames("icon", classes)}>
    {getIcon(tidy(name), color)}
  </div>
);

export default Icons;

进入全屏模式退出全屏模式

这个文件中发生了一些事情。

首先,我们安装了 'classnames' 包来帮助我们将 CSS 类传递给我们的新组件。要使用它,您必须在终端中运行以下命令:

npm install classnames --save

进入全屏模式退出全屏模式

我们已经为我们的新组件设置了一些道具。

我们的第一个是name道具,我们将使用它来选择我们想要返回到我们的项目的图标。

第二个是classes属性,它允许我们向组件应用额外的类。

第三个是color属性,我们将使用它来更改图标的颜色。我们为此道具设置了默认值,使其成为可选的。

使用我们的 SVG 组件

要使用我们的新图标组件,我们可以将它导入到需要它的文件中并提供所需的道具,如下所示:

import Icon from "./components/icons";

// ...

<Icon name="React" classes="size-xs" color="hotpink" />

进入全屏模式退出全屏模式

完整解决方案

您可以在Code Sandbox上查看完整的实现。

你还有其他在 React 中使用 SVG 的聪明方法吗?我很想在评论部分听到他们的消息。

React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。你可以在这里找到 repo u003d>githu

React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子有人说比较 React 和 Angular 就像比较_苹果和橘子_。一个是处理视图的库,另一个是_完整的框架_。反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,