themes - SVG icons in Twenty Nineteen

admin管理员组

文章数量:1334916

The Twenty Nineteen theme uses SVG for its social icons. For example, this is the code for the Google icon:

<svg viewBox="0 0 24 24" version="1.1" xmlns="" xmlns:xlink="">
    <path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path>
</svg>

As you can see, it uses a 24x24px viewbox. I'd like to add some SVG icons from FontAwesome in a Twenty Nineteen child theme, but they use a different viewbox. This is the code for the Google icon in FontAwesome:

<svg xmlns="" viewBox="0 0 488 512">
    <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
</svg>

Is there a way to convert the FontAwesome icons to use a 24x24px viewbox? Is it simply a matter of changing their viewBox attribute?

Thanks in advance

The Twenty Nineteen theme uses SVG for its social icons. For example, this is the code for the Google icon:

<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink">
    <path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path>
</svg>

As you can see, it uses a 24x24px viewbox. I'd like to add some SVG icons from FontAwesome in a Twenty Nineteen child theme, but they use a different viewbox. This is the code for the Google icon in FontAwesome:

<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 488 512">
    <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
</svg>

Is there a way to convert the FontAwesome icons to use a 24x24px viewbox? Is it simply a matter of changing their viewBox attribute?

Thanks in advance

• themes
• icon
• svg

Share Improve this question asked May 25, 2020 at 15:25 leemonleemon 2,03244 gold badges2525 silver badges5151 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You shouldn't need to change the viewbox attribute. You can probably just use it.

The way I think about is SVGs are like they are drawn on graph paper. The viewbox sets out how many squares there are on the paper and the the path in your examples above are the guides to where to draw on the graph paper.

The top left is 0,0 and the bottom right is the extremes of the viewbox. E.g. 24,24 or 488,512.

You should be able to just swap the SVGs out and style with CSS.

I managed to resize the viewbox using Inkscape, the open-source vector graphics editor:

1. Open the SVG icon in Inkscape
2. Open File > Document Properties... and set the width and height fields to the target size
3. Select all objects in the icon with Ctrl+A
4. Adjust the position and size of the icon to fit the new viewbox using the X, Y, W and H fields in the top menu bar.
5. Save the file

本文标签： themesSVG icons in Twenty Nineteen