我已经创建了一个定制图标,并将其作为SVG导入到我的next.js应用程序中。我想实现一个功能,用户可以定制这个图标的颜色,如红色到黄色或黑色等。但这是静态图像,有什么方法可以实现这一点吗?
oxalkeyp1#
有几种可能的方法来解决这个问题:
@svgr/webpack
babel-plugin-inline-react-svg
next.config.js
Dangerously Allow SVG
在您希望SVG显示的文件中
import Star from './star.svg' const Example = () => ( <div> // set your color in fill and stroke is optional <Star height="100" width="100" fill="#6973ff" stroke="black" /> </div> )
我在Codesandbox上用这种方法做了一个demo从react-svgr中提取的代码片段1.安装yarn add --dev @svgr/webpack1.在next.config.js文件中添加以下内容:
yarn add --dev @svgr/webpack
module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }) return config }, }
1.查看您希望SVG显示上述代码的文件中的*
从plugin repo中提取的代码片段1.yarn add -D babel-plugin-inline-react-svg1.在.babelrc文件中添加以下内容:
yarn add -D babel-plugin-inline-react-svg
.babelrc
{ "plugins": [ "inline-react-svg" ] }
摘自Next.js,关于你不应该使用这种方法的原因:由于几个原因,默认加载器不会优化SVG图像。首先,SVG是一种矢量格式,这意味着它可以无损地调整大小。其次,SVG具有许多与HTML/CSS相同的功能,如果没有正确的内容安全策略(CSP)标头,可能会导致漏洞。由于在Next.js中所说的内容,我不会编写这个示例,因为考虑到其他方法,它是多余的。如果您仍想遵循此流程,可以查看他们的文档。
ewm0tg9j2#
您可以使用SVGR包(https://react-svgr.com/docs/next/)并将SVG转换为Reaction组件。然后使用Fill属性或样式道具更改填充。
2条答案
按热度按时间oxalkeyp1#
有几种可能的方法来解决这个问题:
@svgr/webpack
babel-plugin-inline-react-svg
next.config.js
中的Dangerously Allow SVG
获取Next.js镜像(不推荐使用)首先,您的SVG图片需要是可填充的。如何做到这一点超出了问题的范围,但网上有很多资源可以帮助你。
适用于下面的每种方法(为节省空格不重复)
在您希望SVG显示的文件中
webpack(推荐选择)
我在Codesandbox上用这种方法做了一个demo
从react-svgr中提取的代码片段
1.安装
yarn add --dev @svgr/webpack
1.在
next.config.js
文件中添加以下内容:1.查看您希望SVG显示上述代码的文件中的*
巴别塔
从plugin repo中提取的代码片段
1.
yarn add -D babel-plugin-inline-react-svg
1.在
.babelrc
文件中添加以下内容:1.查看您希望SVG显示上述代码的文件中的*
Next.js镜像(不推荐)
摘自Next.js,关于你不应该使用这种方法的原因:
由于几个原因,默认加载器不会优化SVG图像。首先,SVG是一种矢量格式,这意味着它可以无损地调整大小。其次,SVG具有许多与HTML/CSS相同的功能,如果没有正确的内容安全策略(CSP)标头,可能会导致漏洞。
由于在Next.js中所说的内容,我不会编写这个示例,因为考虑到其他方法,它是多余的。
如果您仍想遵循此流程,可以查看他们的文档。
ewm0tg9j2#
您可以使用SVGR包(https://react-svgr.com/docs/next/)并将SVG转换为Reaction组件。然后使用Fill属性或样式道具更改填充。