Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native - SVG icons for Inserter #9294

Merged
merged 23 commits into from
Oct 12, 2018
Merged

React Native - SVG icons for Inserter #9294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
423d189
exports SVG <G> tag and adds mobile compatible SVG icons for code, he…
mzorz Aug 24, 2018
c75a0db
adds simple mechanism to obtain viewport from viewBox so height and w…
mzorz Aug 24, 2018
cb7c413
Update use of content size change event.
SergioEstevao Aug 24, 2018
eb9d683
fixed lint issues
mzorz Aug 24, 2018
bf65beb
removed unneeded aliases
mzorz Aug 24, 2018
6d5b37d
using omit from loadsh to exclude className from props when passing d…
mzorz Aug 24, 2018
ed725d6
moved imports to their corresponding section
mzorz Aug 24, 2018
1b5653a
- Force update the RichText component when a toolbar button is pressed
daniloercoli Aug 24, 2018
516f661
stripping style if not an object in svg native implementation
mzorz Aug 24, 2018
a314ad6
Merge branch 'master' into rnmobile/inserter-svgicons-take1
mzorz Aug 24, 2018
994993c
Merge commit 'cb7c413' into HEAD
mzorz Aug 24, 2018
b0103ea
Merge branch 'fix/icon-svg-gb-hash-reference' into rnmobile/inserter-…
mzorz Aug 24, 2018
b09a59d
added empty native implementation of viewport
mzorz Aug 24, 2018
93513d0
fixed lint issues
mzorz Aug 24, 2018
c1cb4e5
fixed merge conflict
mzorz Aug 27, 2018
bff34fc
Merge branch 'master' into rnmobile/inserter-svgicons-take1
mzorz Sep 4, 2018
2886e01
Merge commit '1b5653a' into rnmobile/inserter-svgicons-take1-merge
mzorz Sep 4, 2018
5227859
Modified comment to better reflect causes of className being conveted…
mzorz Sep 4, 2018
2d47451
building an object out of the passed style/className concatenated str…
mzorz Sep 5, 2018
b678c6d
fix array level indirection when looking into styles object
mzorz Sep 6, 2018
d15300f
Merge remote-tracking branch 'origin/master' into rnmobile/inserter-s…
gziolo Sep 28, 2018
8177f81
fixed merge conflicts
mzorz Oct 11, 2018
defd31c
enforcing usage of SVG and Path primitives in image icon field for Re…
mzorz Oct 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/block-library/src/code/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*/
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import {
Path,
SVG,
} from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -16,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="http://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 viewBox="0 0 24 24" xmlns="http://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',

Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import {
getBlockType,
} from '@wordpress/blocks';
import { RichText } from '@wordpress/editor';
import {
Path,
SVG,
} from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -60,7 +64,7 @@ export const settings = {

description: __( 'Introduce topics and help visitors (and search engines!) understand how your content is organized.' ),

icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z" /><path fill="none" d="M0 0h24v24H0V0z" /></svg>,
icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M5 4v3h5.5v12h3V7H19V4z" /><Path fill="none" d="M0 0h24v24H0V0z" /></SVG>,

category: 'common',

Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import {
} from '@wordpress/blocks';
import { RichText } from '@wordpress/editor';
import { createBlobURL } from '@wordpress/blob';
import {
Path,
SVG,
} from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -94,7 +98,7 @@ export const settings = {

description: __( 'They’re worth 1,000 words! Insert a single image.' ),

icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" /><path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" /></svg>,
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" /><Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" /></SVG>,

category: 'common',

Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/more/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import { compact } from 'lodash';
import { __, _x } from '@wordpress/i18n';
import { RawHTML } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
import {
Path,
G,
SVG,
} from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -22,7 +27,7 @@ export const settings = {

description: __( 'Want to show only part of this post on your blog’s home page? Insert a "More" block where you want the split.' ),

icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2h-5v2z" /></g></svg>,
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2h-5v2z" /></G></SVG>,

category: 'layout',

Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/paragraph/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ import {
RichText,
} from '@wordpress/editor';
import { getPhrasingContentSchema } from '@wordpress/blocks';
import {
Path,
SVG,
} from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -70,7 +74,7 @@ export const settings = {

description: __( 'Add some basic text.' ),

icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></svg>,
icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></SVG>,

category: 'common',

Expand Down
18 changes: 12 additions & 6 deletions packages/components/src/primitives/svg/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,20 @@
import { omit } from 'lodash';
import { Svg } from 'react-native-svg';

export const SVG = ( props ) => {
const appliedProps = omit( props, 'className' );

return <Svg { ...appliedProps } />;
};

export {
G,
Path,
Polygon,
} from 'react-native-svg';

export const SVG = ( props ) => {
const appliedProps = omit( props, 'className' );

return (
<Svg
height="100%"
width="100%"
{ ...appliedProps }
/>
);
};