Fix icon size regression

This PR fixes an icon size regression that was introduced in #9828. Basically SVG icons are _between 20 and 24px_. If an SVG has an explicit width, it uses that width, within the boundaries of those extremes. But unfortunately it also means if the SVG _doesn't_ have an explicit width or height, it collapses to the min-width and min-height. This PR updates documentation, and adds explicit dimensions for all block icons used.
WordPress · Oct 23, 2018 · 0af445c · 0af445c
1 parent 68b454c
commit 0af445c
Show file tree

Hide file tree

Showing 35 changed files with 48 additions and 48 deletions.
diff --git a/docs/block-api.md b/docs/block-api.md
@@ -81,7 +81,7 @@ An icon property should be specified to make it easier to identify a block. Thes
 icon: 'book-alt',
 
 // Specifying a custom svg for the block
-icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
+icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
 ```
 
 **Note:** Custom SVG icons are automatically wrapped in the [`wp.components.SVG` component](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/primitives/svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).

diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js
@@ -15,7 +15,7 @@ export const settings = {
 
  description: __( 'Display a monthly archive of your site’s Posts.' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M7 11h2v2H7v-2zm14-5v14l-2 2H5l-2-2V6l2-2h1V2h2v2h8V2h2v2h1l2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z" /></g></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M7 11h2v2H7v-2zm14-5v14l-2 2H5l-2-2V6l2-2h1V2h2v2h8V2h2v2h1l2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z" /></g></svg>,
 
  category: 'widgets',
 

diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
@@ -18,7 +18,7 @@ export const settings = {
 
  description: __( 'Embed an audio file and a simple audio player.' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="m12 3l0.01 10.55c-0.59-0.34-1.27-0.55-2-0.55-2.22 0-4.01 1.79-4.01 4s1.79 4 4.01 4 3.99-1.79 3.99-4v-10h4v-4h-6zm-1.99 16c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z" /></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="m12 3l0.01 10.55c-0.59-0.34-1.27-0.55-2-0.55-2.22 0-4.01 1.79-4.01 4s1.79 4 4.01 4 3.99-1.79 3.99-4v-10h4v-4h-6zm-1.99 16c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z" /></svg>,
 
  category: 'common',
 

diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
@@ -64,7 +64,7 @@ export const settings = {
 
  description: __( 'Want visitors to click to subscribe, buy, or read more? Get their attention with a button.' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,
 
  category: 'layout',
 

diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js
@@ -15,7 +15,7 @@ export const settings = {
 
  description: __( 'Display a list of all your site’s categories.' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M12,2l-5.5,9h11L12,2z M12,5.84L13.93,9h-3.87L12,5.84z" /><path d="m17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /><path d="m3 21.5h8v-8h-8v8zm2-6h4v4h-4v-4z" /></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M12,2l-5.5,9h11L12,2z M12,5.84L13.93,9h-3.87L12,5.84z" /><path d="m17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /><path d="m3 21.5h8v-8h-8v8zm2-6h4v4h-4v-4z" /></svg>,
 
  category: 'widgets',
 

diff --git a/packages/block-library/src/classic/index.js b/packages/block-library/src/classic/index.js
@@ -16,7 +16,7 @@ export const settings = {
 
  description: __( 'It’s the classic WordPress editor and it’s a block! Drop the editor right in.' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z M0,0h24v24H0V0z" fill="none" /><path d="m20 7v10h-16v-10h16m0-2h-16c-1.1 0-1.99 0.9-1.99 2l-0.01 10c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2z" /><rect x="11" y="8" width="2" height="2" /><rect x="11" y="11" width="2" height="2" /><rect x="8" y="8" width="2" height="2" /><rect x="8" y="11" width="2" height="2" /><rect x="5" y="11" width="2" height="2" /><rect x="5" y="8" width="2" height="2" /><rect x="8" y="14" width="8" height="2" /><rect x="14" y="11" width="2" height="2" /><rect x="14" y="8" width="2" height="2" /><rect x="17" y="11" width="2" height="2" /><rect x="17" y="8" width="2" height="2" /></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z M0,0h24v24H0V0z" fill="none" /><path d="m20 7v10h-16v-10h16m0-2h-16c-1.1 0-1.99 0.9-1.99 2l-0.01 10c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2z" /><rect x="11" y="8" width="2" height="2" /><rect x="11" y="11" width="2" height="2" /><rect x="8" y="8" width="2" height="2" /><rect x="8" y="11" width="2" height="2" /><rect x="5" y="11" width="2" height="2" /><rect x="5" y="8" width="2" height="2" /><rect x="8" y="14" width="8" height="2" /><rect x="14" y="11" width="2" height="2" /><rect x="14" y="8" width="2" height="2" /><rect x="17" y="11" width="2" height="2" /><rect x="17" y="8" width="2" height="2" /></svg>,
 
  category: 'formatting',
 

diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js
@@ -20,7 +20,7 @@ export const settings = {
 
  description: __( 'Add text that respects your spacing and tabs -- perfect for displaying code.' ),
 
- icon: <SVG viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></SVG>,
+ icon: <SVG width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></SVG>,
 
  category: 'formatting',
 

diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js
@@ -11,7 +11,7 @@ export const settings = {
 
  parent: [ 'core/columns' ],
 
- icon: <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z" /></svg>,
+ icon: <svg width="24" height="24" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z" /></svg>,
 
  description: __( 'A single column within a columns block.' ),
 

diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -44,7 +44,7 @@ export const name = 'core/columns';
 export const settings = {
  title: __( 'Columns' ),
 
- icon: <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,
 
  category: 'layout',
 

diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -75,7 +75,7 @@ export const settings = {
 
  description: __( 'Add a full-width image or video, and layer text over it — great for headers.' ),
 
- icon: <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,
+ icon: <svg width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,
 
  category: 'common',