首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >SVGR (SVGO) removeAttrs不移除指定的填充属性。

SVGR (SVGO) removeAttrs不移除指定的填充属性。
EN

Stack Overflow用户
提问于 2020-11-25 18:10:50
回答 1查看 2K关注 0票数 1

即使removeAttrs是在.svgo.yml中指定的,也不会在最终输出中删除Fill属性。这将导致在试图更新传递给生成组件的支持程序时出现问题,如下所示:

代码语言:javascript
运行
复制
<Activity fill="red" />

当我从图标组件中的生成的fill属性中手动删除<Path>属性时,我可以通过道具更改填充。

.svgo.yml配置:

代码语言:javascript
运行
复制
plugins:
  - removeAttrs:
      - attrs: 'path:fill'
  - sortAttrs: true
  - removeXMLNS: true

.svgrrc.yml

代码语言:javascript
运行
复制
icon: false
native: true
typescript: true
dimensions: true
expandProps: 'end'
ref: true
memo: true

package.json脚本用于从assets文件夹生成图标:

代码语言:javascript
运行
复制
    "icons": "npx @svgr/cli -d src/icons assets"

其中一个资产SVG:

代码语言:javascript
运行
复制
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1799 4.41C17.1799 3.08 18.2599 2 19.5899 2C20.9199 2 21.9999 3.08 21.9999 4.41C21.9999 5.74 20.9199 6.82 19.5899 6.82C18.2599 6.82 17.1799 5.74 17.1799 4.41ZM13.3298 14.7593L16.2198 11.0303L16.1798 11.0503C16.3398 10.8303 16.3698 10.5503 16.2598 10.3003C16.1508 10.0503 15.9098 9.8803 15.6508 9.8603C15.3798 9.8303 15.1108 9.9503 14.9498 10.1703L12.5308 13.3003L9.75976 11.1203C9.58976 10.9903 9.38976 10.9393 9.18976 10.9603C8.99076 10.9903 8.81076 11.0993 8.68976 11.2593L5.73076 15.1103L5.66976 15.2003C5.49976 15.5193 5.57976 15.9293 5.87976 16.1503C6.01976 16.2403 6.16976 16.3003 6.33976 16.3003C6.57076 16.3103 6.78976 16.1893 6.92976 16.0003L9.43976 12.7693L12.2898 14.9103L12.3798 14.9693C12.6998 15.1393 13.0998 15.0603 13.3298 14.7593ZM15.4498 3.7803C15.4098 4.0303 15.3898 4.2803 15.3898 4.5303C15.3898 6.7803 17.2098 8.5993 19.4498 8.5993C19.6998 8.5993 19.9398 8.5703 20.1898 8.5303V16.5993C20.1898 19.9903 18.1898 22.0003 14.7898 22.0003H7.40076C3.99976 22.0003 1.99976 19.9903 1.99976 16.5993V9.2003C1.99976 5.8003 3.99976 3.7803 7.40076 3.7803H15.4498Z" fill="#200E32"/>
</svg>

生成的React本机图标组件示例:

代码语言:javascript
运行
复制
import * as React from 'react';
import Svg, {SvgProps, Path} from 'react-native-svg';

function SvgActivity(
  props: SvgProps,
  svgRef?: React.Ref<React.Component<SvgProps>>,
) {
  return (
    <Svg width={24} height={24} fill="none" ref={svgRef} {...props}>
      <Path
        fill="#200E32"
        fillRule="evenodd"
        d="M17.18 4.41c0-1.33 1.08-2.41 2.41-2.41S22 3.08 22 4.41s-1.08 2.41-2.41 2.41-2.41-1.08-2.41-2.41zm-3.85 10.35l2.89-3.73-.04.02c.16-.22.19-.5.08-.75a.737.737 0 00-.61-.44.768.768 0 00-.7.31l-2.42 3.13-2.77-2.18a.79.79 0 00-.57-.16.775.775 0 00-.5.3l-2.96 3.85-.06.09a.747.747 0 00.21.95c.14.09.29.15.46.15.23.01.45-.11.59-.3l2.51-3.23 2.85 2.14.09.06c.32.17.72.09.95-.21zm2.12-10.98c-.04.25-.06.5-.06.75 0 2.25 1.82 4.07 4.06 4.07.25 0 .49-.03.74-.07v8.07c0 3.39-2 5.4-5.4 5.4H7.4C4 22 2 19.99 2 16.6V9.2c0-3.4 2-5.42 5.4-5.42h8.05z"
        clipRule="evenodd"
      />
    </Svg>
  );
}

const ForwardRef = React.forwardRef(SvgActivity);
const MemoForwardRef = React.memo(ForwardRef);
export default MemoForwardRef;

链接到回购:https://github.com/jaksm/svgr-rn

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-26 09:47:27

事实证明,创建.svgo.yml的正确方法是使用这样的连字符:

代码语言:javascript
运行
复制
plugins:
  removeAttrs:
    attrs: 'path:fill'
  sortAttrs: true
  removeXMLNS: true

原始答案:https://github.com/gregberge/svgr/issues/511#issuecomment-734174195

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65010458

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档