React 中的 SVG 图标不显示
Posted
技术标签:
【中文标题】React 中的 SVG 图标不显示【英文标题】:SVG Icons in React don't show 【发布时间】:2018-09-21 14:01:46 【问题描述】:我在 React 中上传 SVG 图标时遇到问题。我将 svg-inline-loader 添加到 webpack,但它没有显示图标。它只是显示未找到的图片。我想将 SVG 图标添加为 img src、背景图像和快捷方式图标。
编辑:
这是我的 webpack.config
module.exports =
entry: ["whatwg-fetch", "./js/app.jsx"],
output:
filename: "./js/out.js"
,
devServer:
inline: true,
contentBase: './',
port: 3001
,
watch: true,
module:
loaders: [
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:
presets: ['es2015','stage-2', 'react']
,
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
,
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
loader: 'file-loader',
options:
name: '[path][name].[ext]'
]
,
test: /\.svg$/,
loader: 'svg-inline-loader'
]
;
【问题讨论】:
您可以随时将 svg 文件更改为 jsx 文件。是否需要向您展示如何? 好吧,我以前从来没有使用过svg文件,所以我不知道如何:/ 【参考方案1】:jsx
将您的代码转换为原生 javascript 并支持svg
s。所以用同样的方式你可以创建<div>
s,你可以创建<svg>
s。
在文本编辑器中打开 svg 文件并将文件类型更改为 jsx
。之后只需将代码调整为 jsx 即可。以下是 100% 有效的 jsx,看起来与您最初在原生 svg 中的相同。原生 svg 中有很多元素可以删除,但正如您所见,它们的概念是相同的。
import * as React from 'react';
//I have this file named as lightning.jsx
const SVG= (
<svg
className="control-lightning"
viewBox="0 0 483.73 483.73"
>
<g>
<polygon
points="119.637,282.441 192.449,282.441 165.869,
483.73 364.094,189.622 296.631,189.622 325.678,0"
/>
</g>
</svg>
);
export default SVG;
尝试将其导入您的项目并进行渲染。这将是一个没有样式的闪电。
【讨论】:
哦,这对我很有帮助。你太棒了:) 没问题!以这种方式编写它的好处是您还可以使用 CSS 类来设置它的样式。 CSS 支持 svg 样式,例如stroke
、fill
、transition
等。如果您喜欢这个答案,请随意点赞并标记为正确;)以上是关于React 中的 SVG 图标不显示的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React 组件在 UI 中显示 svg 图标(.svg 文件)?