使用范围CSS创建SVG组件

我正在创建将呈现各种SVG的React组件：

const Close = ({
  fill,width,height,float,}) => (
  <svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`,cursor: 'pointer' } }>
    <title>x</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Background">
        <line style={ { fill: 'none',stroke: `${fill}`,strokeMiterlimit: 10 } } x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
        <line style={ { fill: 'none',strokeMiterlimit: 10 } } x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
      </g>
    </g>
  </svg>
);

能够提供各种属于该组件的尺寸,颜色等,非常方便…

然而,我没有一个好的解决方案是以干燥的方式处理样式.请注意,线条元素具有相同的样式值.我现在把它们写成内联,因为如果我添加了一个嵌入式样式表,那么我会在页面的其他地方呈现其他SVG的类名冲突(我们的SVG软件反复使用相同的类).

< style scoped>已从规范中删除：https://github.com/whatwg/html/issues/552

Edge：https://caniuse.com/#feat=shadowdomv1尚不支持Shadow DOM

范围风格还有其他选择吗？

解决方法

如果您只想干掉代码,可以创建一个样式对象并重用它：

const Close = ({
                 fill,}) => {
  const style = { fill: 'none',strokeMiterlimit: 10 }
  return (
    <svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`,cursor: 'pointer' } }>
      <title>x</title>
      <g id="Layer_2" data-name="Layer 2">
        <g id="Background">
          <line style={ style } x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
          <line style={ style } x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
        </g>
      </g>
    </svg>
  );
}

这也将导致小的性能改进,因为在每个渲染周期中将创建更少的对象.

原文地址：https://www.jb51.cc/css/215082.html