可以直接调用, 传入 ClassName 改变颜色、大小等

实体图标

颜色值 : #00ADED

let TwitterSolidIcon: React.FC<React.ComponentProps<"svg">> = (props) => (<svg {...props}><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
);
TwitterSolidIcon.defaultProps = {xmlns: "http://www.w3.org/2000/svg",viewBox: "0 0 24 24","aria-hidden": "true",fill: "currentColor",
};

空心图标

let TwitterOutLineIcon: React.FC<React.ComponentProps<"svg">> = (props) => (<svg {...props}><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
);TwitterOutLineIcon.defaultProps = {xmlns: "http://www.w3.org/2000/svg",fill: "none",viewBox: "0 0 24 24",strokeWidth: 2,stroke: "currentColor","aria-hidden": "true",
};

React 中 Twitter 的 SVG 图标 (icons)相关推荐

[react] 在React中怎么使用字体图标？
[react] 在React中怎么使用字体图标? 1.npm install --save react-fontawesome 2.npm install font-awesome 3.import ...
Windows 在资源管理器中预览 SVG 图标
很多时候,我们需要在 Windows 的资源管理器中预览 SVG 图标,就像预览 JPG.PNG 等图片一样,那如何做到呢? 下载 SVG 预览扩展打开链接 https://github.com/m ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
webpack实现下载icon图标(svg格式) 用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目 svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删 ...
SVG 图标制作指南
iconfont解决了我们以前大量使用小图标带来的种种问题,但是也有自身的各种缺陷.比如不支持多色,不同浏览器下的表现不同,需要做各种兼容等. 不久的将来iconfont应该会被svg symbol技 ...
react前端显示图片_在 React 中使用 SVG 图标组件
SVG 很酷,它们能放大放小. 那么 SVG 的优点是什么? SVG 或可缩放矢量图形是基于 XML 的格式图像格式,可以在保持图像质量的同时缩放到任何大小.因此,当你需要根据需要调整大小的图像时,S ...
php arcode svg,在react中使用svg的各种方法总结（附代码）
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
如何在VUE项目中使用svg图标
一文带你搞定svg图标的使用! 文章目录前言一.SVG相较于字体图标的优点二.使用步骤 1.新建一个vue2项目 2.安装项目依赖 3 .在src目录下新建文件夹 4.创建svg-icon组件 ...
html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果
2016年我写过一篇文章如何使用SVG图标,其"试验性部分"的结语是个警告 - "抱歉,渐变填充无法工作". 我指的是像fill: linear-gradien ...
React中的SVG陷阱
react svg When we want to use SVG image in React, we may import it like this: 当我们想在React中使用SVG图像时,我们 ...

React 中 Twitter 的 SVG 图标 (icons)

实体图标

空心图标

React 中 Twitter 的 SVG 图标 (icons)相关推荐

最新文章

热门文章