Skip to content

Commit 578d0ef

Browse files
youknowriadgziolo
youknowriad
authored and
gziolo
committed
Add an eslint rule to use cross-environment SVG primitives (#10652)
* Add an eslint rule to use cross-environment SVG primitives * Extend the list of forbidden elements Uses an existing react eslint rule to perform validation. Adds new components to make the existing icons mobile app friendly. * Change the way the default icon for block is set * Ensure that default icon goes through the process of width and height normalization in BlockIcon Props to @jasmussen for helping to catch it.
1 parent 8e2c466 commit 578d0ef

File tree

36 files changed

+122
-55
lines changed

36 files changed

+122
-55
lines changed

‎.eslintrc.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,21 @@ module.exports = {
169169
message: 'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
170170
},
171171
],
172+
'react/forbid-elements': [ 'error', {
173+
forbid: [
174+
[ 'circle', 'Circle' ],
175+
[ 'g', 'G' ],
176+
[ 'path', 'Path' ],
177+
[ 'polygon', 'Polygon' ],
178+
[ 'rect', 'Rect' ],
179+
[ 'svg', 'SVG' ],
180+
].map( ( [ element, componentName ] ) => {
181+
return {
182+
element,
183+
message: `use cross-platform <${ componentName }> component instead.`,
184+
};
185+
} ),
186+
} ],
172187
},
173188
overrides: [
174189
{

‎packages/block-library/src/archives/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5+
import { G, Path, SVG } from '@wordpress/components';
56

67
/**
78
* Internal dependencies
@@ -15,7 +16,7 @@ export const settings = {
1516

1617
description: __( 'Display a monthly archive of your site’s Posts.' ),
1718

18-
icon: <svg viewBox="0 0 24 24" xmlns="http://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>,
19+
icon: <SVG viewBox="0 0 24 24" xmlns="http://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>,
1920

2021
category: 'widgets',
2122

‎packages/block-library/src/audio/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
import { __ } from '@wordpress/i18n';
55
import { RichText } from '@wordpress/editor';
6+
import { SVG, Path } from '@wordpress/components';
67

78
/**
89
* Internal dependencies
@@ -18,7 +19,7 @@ export const settings = {
1819

1920
description: __( 'Embed an audio file and a simple audio player.' ),
2021

21-
icon: <svg viewBox="0 0 24 24" xmlns="http://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>,
22+
icon: <SVG viewBox="0 0 24 24" xmlns="http://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>,
2223

2324
category: 'common',
2425

‎packages/block-library/src/button/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { omit, pick } from 'lodash';
77
/**
88
* WordPress dependencies
99
*/
10+
import { G, Path, SVG } from '@wordpress/components';
1011
import { __ } from '@wordpress/i18n';
1112
import {
1213
RichText,
@@ -64,7 +65,7 @@ export const settings = {
6465

6566
description: __( 'Want visitors to click to subscribe, buy, or read more? Get their attention with a button.' ),
6667

67-
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,
68+
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></G></SVG>,
6869

6970
category: 'layout',
7071

‎packages/block-library/src/categories/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5+
import { SVG, Path } from '@wordpress/components';
56

67
/**
78
* Internal dependencies
@@ -15,7 +16,7 @@ export const settings = {
1516

1617
description: __( 'Display a list of all your site’s categories.' ),
1718

18-
icon: <svg viewBox="0 0 24 24" xmlns="http://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>,
19+
icon: <SVG viewBox="0 0 24 24" xmlns="http://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>,
1920

2021
category: 'widgets',
2122

‎packages/block-library/src/classic/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
import { RawHTML } from '@wordpress/element';
55
import { __ } from '@wordpress/i18n';
6+
import { Path, Rect, SVG } from '@wordpress/components';
67

78
/**
89
* Internal dependencies
@@ -16,7 +17,7 @@ export const settings = {
1617

1718
description: __( 'It’s the classic WordPress editor and it’s a block! Drop the editor right in.' ),
1819

19-
icon: <svg viewBox="0 0 24 24" xmlns="http://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>,
20+
icon: <SVG viewBox="0 0 24 24" xmlns="http://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>,
2021

2122
category: 'formatting',
2223

‎packages/block-library/src/columns/column.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/**
22
* WordPress dependencies
33
*/
4+
import { Path, SVG } from '@wordpress/components';
45
import { __ } from '@wordpress/i18n';
56
import { InnerBlocks } from '@wordpress/editor';
67

@@ -11,7 +12,7 @@ export const settings = {
1112

1213
parent: [ 'core/columns' ],
1314

14-
icon: <svg xmlns="http://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>,
15+
icon: <SVG xmlns="http://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>,
1516

1617
description: __( 'A single column within a columns block.' ),
1718

‎packages/block-library/src/columns/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import memoize from 'memize';
99
* WordPress dependencies
1010
*/
1111
import { __ } from '@wordpress/i18n';
12-
import { PanelBody, RangeControl } from '@wordpress/components';
12+
import { PanelBody, RangeControl, G, SVG, Path } from '@wordpress/components';
1313
import { Fragment } from '@wordpress/element';
1414
import { createBlock } from '@wordpress/blocks';
1515
import {
@@ -44,7 +44,7 @@ export const name = 'core/columns';
4444
export const settings = {
4545
title: __( 'Columns' ),
4646

47-
icon: <svg viewBox="0 0 24 24" xmlns="http://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>,
47+
icon: <SVG viewBox="0 0 24 24" xmlns="http://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>,
4848

4949
category: 'layout',
5050

‎packages/block-library/src/cover/index.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,16 @@ import classnames from 'classnames';
66
/**
77
* WordPress dependencies
88
*/
9-
import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar, withNotices } from '@wordpress/components';
9+
import {
10+
IconButton,
11+
PanelBody,
12+
RangeControl,
13+
ToggleControl,
14+
Toolbar,
15+
withNotices,
16+
SVG,
17+
Path,
18+
} from '@wordpress/components';
1019
import { Fragment } from '@wordpress/element';
1120
import { __ } from '@wordpress/i18n';
1221
import { createBlock } from '@wordpress/blocks';
@@ -75,7 +84,7 @@ export const settings = {
7584

7685
description: __( 'Add a full-width image or video, and layer text over it — great for headers.' ),
7786

78-
icon: <svg xmlns="http://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>,
87+
icon: <SVG xmlns="http://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>,
7988

8089
category: 'common',
8190

0 commit comments

Comments
 (0)