WordPress · youknowriad · Sep 6, 2018 · gziolo · Sep 6, 2018 · youknowriad
diff --git a/docs/block-api.md b/docs/block-api.md
@@ -82,7 +82,7 @@ icon: 'book-alt',
 icon: <svg viewBox="0 0 24 24" xmlns="http://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.AccessibleSVG` component](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/accessible-svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
+**Note:** Custom SVG icons are automatically wrapped in the [`wp.components.Svg` component](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
 
 An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property.
 Besides src the object can contain background and foreground colors, this colors will appear with the icon

diff --git a/docs/manifest.json b/docs/manifest.json
@@ -504,9 +504,9 @@
 		"parent": null
 	},
 	{
-		"title": "AccessibleSvg",
-		"slug": "accessible-svg",
-		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/accessible-svg/README.md",
+		"title": "Svg",
+		"slug": "svg",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/svg/README.md",
 		"parent": "components"
 	},
 	{
@@ -851,4 +851,4 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-viewport.md",
 		"parent": "data"
 	}
-]
+]
diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
           onClick={[Function]}
           type="button"
         >
-          <AccessibleSVG
+          <Svg
             className="components-panel__arrow"
             height="24px"
             viewBox="0 0 24 24"
@@ -53,7 +53,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
                 />
               </g>
             </svg>
-          </AccessibleSVG>
+          </Svg>
           My panel title
         </button>
       </Button>

diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
           onClick={[Function]}
           type="button"
         >
-          <AccessibleSVG
+          <Svg
             className="components-panel__arrow"
             height="24px"
             viewBox="0 0 24 24"
@@ -53,7 +53,7 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
                 />
               </g>
             </svg>
-          </AccessibleSVG>
+          </Svg>
           My panel title
         </button>
       </Button>

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,4 +9,4 @@
 
 ### New Feature
 
-- Added a new `AccessibleSVG` component.
+- Added a new `Svg` component.
diff --git a/packages/components/src/form-toggle/index.js b/packages/components/src/form-toggle/index.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import AccessibleSVG from '../accessible-svg';
+import Svg from '../svg';
 
 function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 	const wrapperClasses = classnames(
@@ -29,8 +29,8 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
 			{ checked ?
-				<AccessibleSVG className="components-form-toggle__on" width="2" height="6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z" /></AccessibleSVG> :
-				<AccessibleSVG className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></AccessibleSVG>
+				<Svg className="components-form-toggle__on" width="2" height="6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z" /></Svg> :
+				<Svg className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></Svg>
 			}
 		</span>
 	);

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -1,7 +1,7 @@
 // Components
 export * from './primitives';
 // eslint-disable-next-line camelcase
-export { default as AccessibleSVG } from './accessible-svg';
+export { default as Svg } from './svg';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
@@ -13,7 +13,7 @@ import { Component } from '@wordpress/element';
  */
 import Button from '../button';
 import Dashicon from '../dashicon';
-import AccessibleSVG from '../accessible-svg';
+import Svg from '../svg';
 
 class PanelBody extends Component {
 	constructor( props ) {
@@ -52,14 +52,14 @@ class PanelBody extends Component {
 							aria-expanded={ isOpened }
 						>
 							{ isOpened ?
-								<AccessibleSVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+								<Svg className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 									<g><path fill="none" d="M0,0h24v24H0V0z" /></g>
 									<g><path d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z" /></g>
-								</AccessibleSVG> :
-								<AccessibleSVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+								</Svg> :
+								<Svg className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 									<g><path fill="none" d="M0,0h24v24H0V0z" /></g>
 									<g><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" /></g>
-								</AccessibleSVG>
+								</Svg>
 							}
 							{ icon && <Dashicon icon={ icon } className="components-panel__icon" /> }
 							{ title }

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
@@ -24,7 +24,7 @@ describe( 'PanelBody', () => {
 			expect( panelBody.hasClass( 'is-opened' ) ).toBe( true );
 			expect( panelBody.state( 'opened' ) ).toBe( true );
 			expect( button.prop( 'onClick' ) ).toBe( panelBody.instance().toggle );
-			expect( button.childAt( 0 ).name() ).toBe( 'AccessibleSVG' );
+			expect( button.childAt( 0 ).name() ).toBe( 'Svg' );
 			expect( button.childAt( 1 ).text() ).toBe( 'Some Text' );
 		} );
 

diff --git a/...s/components/src/accessible-svg/README.md → packages/components/src/svg/README.md b/...s/components/src/accessible-svg/README.md → packages/components/src/svg/README.md
@@ -1,14 +1,14 @@
-# AccessibleSVG
+# Svg
 
 A drop-in replacement for the svg element that adds the required accessibility attributes for SVG elements across browsers.
 
 ## Usage
 
 ```jsx
-import { AccessibleSVG } from '@wordpress/components';
+import { Svg } from '@wordpress/components';
 
 const MyIcon = () => (
-	<AccessibleSVG
+	<Svg
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 	>
@@ -18,7 +18,7 @@ const MyIcon = () => (
 			<path d="M12 12l1 2 3-3 3 4H9z" />
 			<path d="M2 6v14l2 2h14v-2H4V6H2z" />
 		</g>
-	</AccessibleSVG>
+	</Svg>
 	>
 );
 ```
diff --git a/...es/components/src/accessible-svg/index.js → packages/components/src/svg/index.js b/...es/components/src/accessible-svg/index.js → packages/components/src/svg/index.js
@@ -1,4 +1,4 @@
-function AccessibleSVG( props ) {
+function Svg( props ) {
 	const appliedProps = {
 		...props,
 		role: 'img',
@@ -9,4 +9,4 @@ function AccessibleSVG( props ) {
 	return <svg { ...appliedProps } />;
 }
 
-export default AccessibleSVG;
+export default Svg;
diff --git a/packages/editor/src/components/block-icon/index.js b/packages/editor/src/components/block-icon/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Dashicon, AccessibleSVG } from '@wordpress/components';
+import { Dashicon, Svg } from '@wordpress/components';
 import { createElement, Component } from '@wordpress/element';
 
 function renderIcon( icon ) {
@@ -19,7 +19,7 @@ function renderIcon( icon ) {
 
 		return icon();
 	} else if ( icon && icon.type === 'svg' ) {
-		return <AccessibleSVG { ...icon.props } />;
+		return <Svg { ...icon.props } />;
 	}
 
 	return icon || null;

diff --git a/packages/editor/src/components/block-mover/arrows.js b/packages/editor/src/components/block-mover/arrows.js
@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { AccessibleSVG } from '@wordpress/components';
+import { Svg } from '@wordpress/components';
 
 export const upArrow = (
-	<AccessibleSVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+	<Svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
 		<polygon points="9,4.5 3.3,10.1 4.8,11.5 9,7.3 13.2,11.5 14.7,10.1 " />
-	</AccessibleSVG>
+	</Svg>
 );
 
 export const downArrow = (
-	<AccessibleSVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+	<Svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
 		<polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
-	</AccessibleSVG>
+	</Svg>
 );
diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js
@@ -7,7 +7,7 @@ import { castArray, filter, first, get, mapKeys, orderBy } from 'lodash';
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Dropdown, IconButton, Toolbar, PanelBody, AccessibleSVG } from '@wordpress/components';
+import { Dropdown, IconButton, Toolbar, PanelBody, Svg } from '@wordpress/components';
 import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocks } from '@wordpress/blocks';
 import { Component, Fragment } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
@@ -88,7 +88,7 @@ export class BlockSwitcher extends Component {
 								onKeyDown={ openOnArrowDown }
 							>
 								<BlockIcon icon={ blockType.icon && blockType.icon.src } showColors />
-								<AccessibleSVG className="editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></AccessibleSVG>
+								<Svg className="editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></Svg>
 							</IconButton>
 						</Toolbar>
 					);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@

		### New Feature

		- Added a new `AccessibleSVG` component.
		- Added a new `Svg` component.