Fontawesome 5 SVG with JS：SVG如何随font-size CSS属性缩放及仿FA5缩放示例SVG

Great questions—let’s break this down clearly, since SVG scaling can feel tricky if you’re used to icon fonts!

1. How do FontAwesome 5 SVG-with-JS icons scale with CSS font-size? #

When you use FontAwesome’s SVG-with-JS mode, the library handles the scaling behind the scenes with two key moves:

• It injects inline SVG elements with a class like fa-svg-inline--fa, and its built-in CSS sets the SVG’s width and height to 1em.
• Since em units are relative to the element’s (or its parent’s) font-size, adjusting that property directly scales the icon.
• The SVG also retains its original viewBox attribute (e.g., 0 0 512 512 for most FA icons), which ensures the icon scales proportionally without distortion.

For example:

<span style="font-size: 2rem;">
  <i class="fas fa-user"></i> <!-- JS converts this to inline SVG -->
</span>

The resulting SVG will render at 2rem (32px, assuming a base font-size: 16px) because its width/height are tied to 1em, inheriting the parent’s font-size.

2. What’s FontAwesome’s approach to scaling SVGs with font-size, and how to replicate it for custom SVGs? #

Core of FontAwesome’s Method #

FA’s scaling trick relies on two non-negotiable pieces:

1. Relative units for SVG dimensions: Using 1em for width and height lets the SVG inherit the font-size from its context.
2. Valid viewBox attribute: The viewBox defines the SVG’s internal coordinate system, so scaling the outer dimensions won’t stretch or squish the icon.

Step-by-Step to Replicate for Custom SVGs #

Follow these steps to make your own SVGs scale with font-size:

• Step 1: Add a viewBox to your SVG
  Every custom SVG needs a viewBox that matches its native design dimensions. For example, if your icon is a 24x24 square, add viewBox="0 0 24 24". Without this, scaling will break.

• Step 2: Create a reusable CSS class
  Define rules to tie the SVG’s size to em units, just like FA does:

  .custom-icon {
    display: inline-block; /* Match FA's inline behavior */
    width: 1em;
    height: 1em;
    font-size: inherit; /* Inherit font-size from parent */
    vertical-align: -.125em; /* Optional: Match FA's vertical alignment */
    fill: currentColor; /* Optional: Make icon color inherit text color */
  }
  

• Step 3: Apply the class to your SVG
  Here’s an example custom SVG using the class:

  <svg class="custom-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
  </svg>
  

• Step 4: Test scaling with font-size
  Now you can resize the icon by adjusting the font-size on its parent or the SVG itself:

  <!-- 16px icon -->
  <p style="font-size: 16px;">
    <svg class="custom-icon" ...></svg> Small icon
  </p>
  
  <!-- 48px icon -->
  <p style="font-size: 48px;">
    <svg class="custom-icon" ...></svg> Large icon
  </p>
  

Pro Tip #

If your custom SVG uses fixed stroke-width values in pixels, change them to 1 (or a relative unit like %). The viewBox will automatically scale the stroke proportionally as the icon grows or shrinks.

内容的提问来源于stack exchange，提问作者J. Doe