React Icons

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

npm install react-icons --save

Usage

import { FaBeer } from 'react-icons/fa';class Question extends React.Component {render() {return <h3> Lets go for a <FaBeer />? </h3>}
}

More info

https://github.com/react-icons/react-icons

另一个可以直接使用的：

https://blog.csdn.net/qq_34057640/article/details/70908085

https://ionicons.com/

2、使用svg图形：

在网站：http://www.iconfont.cn/search/index?q=%E7%B1%BB%E5%9E%8B&page=1&fromCollection=1

搜索自己感兴趣的图标

svg下载

打开svg文件：复制svg内容，这是关键，省去了自己绘制SVG的麻烦

制作图标组件，以方便引用

引用组件，通过属性pops把父组件的参数传递进来

svg的viewBox用来干嘛？：https://segmentfault.com/a/1190000009226427

svg图形制作网站：http://svg.wxeditor.com/ 实在找不到满意的图形，只能是自己绘制了

参考：

1、https://cloud.tencent.com/developer/article/1009780

2、https://juejin.im/post/5b567ec0e51d4519962ecb8c

下面这篇英文文章值得一读，介绍了如何在React中使用SVG组件的几种方法。文末还给了2个其他方法：使用webpack加载器直接把SVG文件加载为组件；React Inline SVG — A react component that takes SVG file paths as prop to render them on the document

3、https://blog.lftechnology.com/using-svg-icons-components-in-react-44fbe8e5f91

4、https://github.com/necolas/icon-builder-example

react使用引入svg的icon；svg图形制作相关推荐

[react] React怎样引入svg的文件？
[react] React怎样引入svg的文件? import React from 'react'; import logo from './logo.png'; // Tell Webpack t ...
使用SVG中的Symbol元素制作Icon
前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
webpack实现下载icon图标(svg格式) 用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目 svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删 ...
利用svg添加icon
学习笔记今天一口气看了很多大佬关于icon的用法,unicode 和 font-class方式就不做记录了,转载一下大佬的文章手摸手带你优雅使用,icon里面有详细的关于icon发展史及使用方法. ...
用SVG技术实现动态图形输出的嵌入式Web服务
摘要本文结合控制系统对嵌入式Web服务器的要求,分析了嵌入式Web服务器的基本原理.动态内容实现方法,并结合实例着重介绍了基于SVG技术实现动态图形输出的方法. 关键字嵌入式系统 SV ...
SVG绘制电路元器件图形与GO.Js绘制元器件电路图形比较
你需要能看的懂SVG中path标签绘制的路径,本篇才对你有意义实际效果如下图: 演示效果 go中用到的绘制规则和svg差不多,只是新增了一些新的方法. 本例中除了二次贝塞尔曲线绘制的正弦波需要研究之 ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
React之PixiJS之渲染复杂SVG
React之PixiJS之渲染复杂SVG 一.概述 Pixi是一个超快的2D渲染引擎,这里主要使用PixiJS v6渲染复杂的SVG 二.总结使用 @pixi-essentials/svg给我们转换 ...
html+引入svg矢量图,SVG 矢量图的加载
一.什么是 SVG SVG 是可缩放矢量图形,用户可以用代码来直接描绘图像.区别于 JPG 和 PNG 的需要用引擎来加载的图片,它直接用画布绘制,所以是无损失的. 二.SVG 的优点 SVG文件时纯 ...

react使用引入svg的icon；svg图形制作

React Icons

Installation

Usage

More info

react使用引入svg的icon；svg图形制作相关推荐

最新文章

热门文章