SVGR动态尺寸计算：基于内容的SVG大小调整-优快云博客

SVGR动态尺寸计算：基于内容的SVG大小调整

【免费下载链接】svgr Transform SVGs into React components 🦁 项目地址: https://gitcode.com/gh_mirrors/sv/svgr

在前端开发中，SVG（可缩放矢量图形）的尺寸控制一直是设计师和开发者面临的常见挑战。固定尺寸的SVG图标在不同屏幕尺寸和布局中往往难以适配，而手动调整每个图标的宽高又会耗费大量精力。SVGR（SVG to React）作为一款将SVG转换为React组件的工具，提供了多种动态尺寸计算方案，帮助开发者轻松实现基于内容的SVG大小调整。本文将深入探讨SVGR的动态尺寸计算机制，包括核心插件原理、配置方法及实战案例。

动态尺寸计算的核心插件：svg-em-dimensions

SVGR的动态尺寸计算功能主要由babel-plugin-svg-em-dimensions插件实现。该插件通过修改SVG元素的width和height属性，将固定像素值转换为相对单位em，从而使SVG尺寸能够继承父元素的文本大小，实现内容自适应。

插件工作原理

babel-plugin-svg-em-dimensions插件的核心逻辑位于packages/babel-plugin-svg-em-dimensions/src/index.ts文件中。其主要功能包括：

识别SVG元素：插件会遍历JSX语法树，识别<svg>或<Svg>标签。
处理尺寸属性：对于识别到的SVG元素，插件会检查其width和height属性。如果这些属性存在固定值（如width="24"），插件会将其替换为em单位的相对值；如果不存在这些属性，则会自动添加。
动态值生成：插件通过getValue函数处理用户配置的尺寸值，支持数字、字符串或未定义三种类型。当值未定义时，默认使用1em。

以下是插件的核心代码片段：

const elements = ['svg', 'Svg']

export interface Options {
  width: number | string
  height: number | string
}

const getValue = (raw: undefined | number | string) => {
  if (raw === undefined) return t.stringLiteral('1em')
  switch (typeof raw) {
    case 'number':
      return t.jsxExpressionContainer(t.numericLiteral(raw))
    case 'string':
      return t.stringLiteral(raw)
    default:
      return t.stringLiteral('1em')
  }
}

插件应用场景

svg-em-dimensions插件特别适用于需要创建图标系统的场景。通过将SVG尺寸设置为1em，图标大小将自动继承其父元素的字体大小，从而实现与文本内容的自然融合。例如，在按钮组件中使用SVG图标时，图标大小会自动匹配按钮文本的大小，无需额外调整。

配置动态尺寸的两种方式

SVGR提供了两种主要方式来配置动态尺寸：通过--icon命令行选项快速启用，或通过svg-em-dimensions插件进行高级自定义。

使用--icon选项快速配置

--icon是SVGR CLI提供的一个便捷选项，用于将SVG转换为图标组件。启用该选项后，SVGR会自动将SVG的width和height属性设置为1em，使其尺寸能够继承父元素的文本大小。

基本用法

在命令行中使用--icon选项：

npx @svgr/cli --icon input.svg -o OutputIcon.js

上述命令会将input.svg转换为一个React组件，其中SVG的宽高被设置为1em。生成的组件代码如下：

import * as React from 'react'

function OutputIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      {...props}
    >
      {/* SVG内容 */}
    </svg>
  )
}

export default OutputIcon

自定义尺寸值

除了默认的1em，--icon选项还支持自定义尺寸值。例如，将尺寸设置为2em：

npx @svgr/cli --icon 2em input.svg -o OutputIcon.js

此时生成的SVG组件将具有width="2em"和height="2em"属性。

通过配置文件自定义

对于更复杂的动态尺寸需求，可以通过SVGR的配置文件（如.svgrrc）或API参数来细粒度控制svg-em-dimensions插件的行为。

配置文件示例

创建.svgrrc文件，并添加以下配置：

{
  "plugins": [
    [
      "svg-em-dimensions",
      {
        "width": "1.5em",
        "height": "1.5em"
      }
    ]
  ]
}

上述配置会将所有SVG组件的默认尺寸设置为1.5em。

结合其他插件使用

svg-em-dimensions插件可以与SVGR的其他插件配合使用，实现更强大的功能。例如，结合@svgr/plugin-svgo插件可以在优化SVG代码的同时调整尺寸：

{
  "plugins": [
    "svgo",
    [
      "svg-em-dimensions",
      {
        "width": "{props.size}",
        "height": "{props.size}"
      }
    ]
  ]
}

上述配置使用了动态属性值{props.size}，允许在使用组件时通过size prop自定义SVG尺寸：

<MyIcon size="2em" />

官方配置选项：icon模式

除了svg-em-dimensions插件，SVGR还提供了一个顶层配置选项icon，用于快速启用图标模式。该选项本质上是对svg-em-dimensions插件的封装，提供了更简洁的配置方式。

icon选项的行为

根据官方文档，icon选项的主要作用是：

替换SVG的width和height属性为自定义值。如果未指定值，则使用1em，使SVG尺寸继承文本大小。

icon选项的配置方式如下：

默认值	CLI覆盖	API覆盖
`false`	`--icon [value]`	`icon: boolean \\| string \\| number`

当icon选项设置为true或未指定值时，等价于使用svg-em-dimensions插件的默认配置（width="1em"，height="1em"）。当指定具体值（如--icon 24）时，则会将尺寸设置为该值。

icon模式与svg-em-dimensions插件的关系

icon选项和svg-em-dimensions插件都用于处理SVG尺寸，但它们的定位不同：

icon选项：提供了一种快捷方式，适用于大多数图标场景，配置简单。
svg-em-dimensions插件：提供了更灵活的自定义能力，支持动态属性值和复杂配置。

在实际使用中，可以根据需求选择合适的方式。对于简单的图标场景，推荐使用icon选项；对于需要动态prop或自定义单位的场景，则需要直接使用svg-em-dimensions插件。

实战案例：响应式图标系统

下面通过一个实战案例，演示如何使用SVGR的动态尺寸计算功能构建响应式图标系统。

需求分析

假设我们需要创建一套图标系统，满足以下要求：

图标尺寸能够根据使用场景自动调整（如按钮内图标、标题旁图标）。
支持通过prop自定义图标大小和颜色。
确保图标在不同主题（亮色/暗色）下的可读性。

实现方案

使用icon模式配置基础尺寸：在svgr.config.js中启用icon模式，设置默认尺寸为1em。
添加动态颜色支持：使用replace-attr-values选项将SVG的fill属性替换为currentColor，使图标颜色继承文本颜色。
创建高阶组件封装：编写一个高阶组件，根据不同使用场景提供预设尺寸，并支持自定义prop。

配置文件

// svgr.config.js
module.exports = {
  icon: true,
  replaceAttrValues: {
    '#000': 'currentColor',
    '#FFF': 'currentColor'
  },
  svgProps: {
    focusable: 'false',
    'aria-hidden': 'true'
  }
}

高阶组件

// components/Icon.jsx
import React from 'react'

export const Icon = ({ name, size = '1em', color = 'currentColor', ...props }) => {
  // 动态导入SVG组件
  const SvgIcon = React.lazy(() => import(`../icons/${name}.svg`))

  return (
    <span style={{ fontSize: size, color }} {...props}>
      <React.Suspense fallback={<div>Loading...</div>}>
        <SvgIcon />
      </React.Suspense>
    </span>
  )
}

// 预设尺寸的图标组件
export const ButtonIcon = (props) => <Icon size="1.2em" {...props} />
export const TitleIcon = (props) => <Icon size="1.5em" {...props} />

使用示例

// 按钮内图标
<button>
  <ButtonIcon name="search" />
  搜索
</button>

// 标题旁图标
<h1>
  <TitleIcon name="star" color="#FFD700" />
  热门内容
</h1>

// 自定义尺寸和颜色
<Icon name="settings" size="2em" color="#666" />

通过上述方案，我们构建了一个灵活的响应式图标系统，图标尺寸和颜色能够根据上下文自动调整，大大提升了开发效率和用户体验。

总结

SVGR的动态尺寸计算功能通过svg-em-dimensions插件和icon配置选项，为开发者提供了强大的SVG尺寸控制能力。无论是简单的图标适配还是复杂的响应式系统，都可以通过灵活配置实现。核心要点包括：

使用--icon CLI选项快速启用图标模式，适用于大多数简单场景。
通过svg-em-dimensions插件进行高级自定义，支持动态prop和复杂单位。
结合配置文件和高阶组件，构建可复用的图标系统。

通过掌握这些技术，开发者可以告别繁琐的SVG尺寸调整工作，专注于创造更优秀的用户界面。更多关于SVGR动态尺寸计算的细节，可参考官方文档和插件源码。

【免费下载链接】svgr Transform SVGs into React components 🦁 项目地址: https://gitcode.com/gh_mirrors/sv/svgr

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考