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

Jump to bottom

Allow Gridicons library to be imported by component #283

Merged
merged 36 commits into from
Mar 14, 2018
Merged

Allow Gridicons library to be imported by component #283

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
81ed4ee
Write to build/ every JSX component separately
oandregal Mar 5, 2018
d27ab4e
Teach babel to process every JSX in build
oandregal Mar 6, 2018
6946b70
Allow individual icons to be imported by gridicons/icon
oandregal Mar 6, 2018
e7b114c
Rename build/ to react-icons/
oandregal Mar 6, 2018
5fbbef9
Add the gridicon-iconname class to every component
oandregal Mar 6, 2018
a82adb3
Shrink icons by using a function instead of React.PureComponent
oandregal Mar 6, 2018
b32bf60
Add classes to SVG
oandregal Mar 6, 2018
a9010c9
Use cjs and esm folders to publish the icons
oandregal Mar 8, 2018
2c0e264
Convert to templates
oandregal Mar 8, 2018
1344565
Save some bytes of cjs/index.js
oandregal Mar 8, 2018
15357c6
Save some bytes in example
oandregal Mar 8, 2018
df051c3
Use js extension for ESModules
oandregal Mar 8, 2018
b4ad138
Publish both CommonJS and ESModules
ockham Mar 8, 2018
482b142
Fix .gitignore
oandregal Mar 8, 2018
b4ca433
Fix package.json indentation
oandregal Mar 8, 2018
eb60b9c
Declare where is the main untranspiled file
oandregal Mar 8, 2018
dbb5a2c
Update docs
oandregal Mar 8, 2018
64fb4ba
Update docs
oandregal Mar 8, 2018
42fae14
Bump to v3.0.0-alpha and update CHANGELOG
oandregal Mar 9, 2018
84d9357
Fix Calypso DevDocs example component
oandregal Mar 9, 2018
568cbde
Bump to v3.0.1-alpha
oandregal Mar 9, 2018
d5963b9
Remove ssr-pragma
oandregal Mar 9, 2018
d2d1478
Remove extension in import
oandregal Mar 9, 2018
bed88b4
Move icon offset arrays to external file
oandregal Mar 9, 2018
fbd44f9
Bump to v3.0.2
oandregal Mar 9, 2018
7001b5d
Update CHANGELOG
oandregal Mar 9, 2018
31ccaf0
Bump to v3.0.0-alpha.1
oandregal Mar 9, 2018
27ca79f
Remove esnext key
oandregal Mar 13, 2018
c0d1361
Use a unique dist/ folder instead of esm/ and cjs/
oandregal Mar 13, 2018
a5bed97
Only export CommonJS modules
oandregal Mar 13, 2018
6337624
Update README
oandregal Mar 13, 2018
37f871a
Update ignored folders
oandregal Mar 14, 2018
65ce3d9
Update CHANGELOG with new proposal
oandregal Mar 14, 2018
0262b6b
Bump to 3.0.0-alpha.2
oandregal Mar 14, 2018
b884c31
Use intermediate build/ dir for JSX files
oandregal Mar 14, 2018
da5f24e
Bump version to 3.0.0
oandregal Mar 14, 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
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ node_modules/
/npm-debug.log
.idea/
svg-min-react/
build/
cjs/
esm/
.DS_Store
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
_The versioning refers to the React component build._

#### v3.0.0 (2018-03-09)
* React: remove obsolete @ssr-ready pragma from components.
* React: allow importing individual icons, both in CommonJS and ECMAScript module formats.
* React: substitute React.PureComponent for a JavaScript function, to minimize the bundle size of transpiled CommonJS files as much as possible.
* Package: added a `esnext` key in the package.json so API consumers can use it for importing the main ESM file.
* Build: use template literals to create the React components and centralize the _icon needs offset_ logic in the svg-to-react Grunt task.
* Build: deleted the `build/` directory in favor of separate `cjs/` and `esm/` folders that contain CommonJS and ECMAScript modules respectively.

Copy link
Contributor

@folletto folletto Mar 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we avoid acronyms (cjs, esm) in favor of a clear, spelled out folder name?

  • common-js
  • ecmascript

Also: can we add somewhere a detail on why there's this split, and as a developer when should I pick one or the other?

In genereal: is there any way to avoid this split for a simpler solution that reduces decision fatigue?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a very good question I myself pondered about.

We can have a default import GridiconExternal from 'gridicons/external' that pulls the CommonJS module (which is now the common format used in npm packages). That was actually the original proposal, but it would compromise future backward compatibility, as it was raised by @ockham Some notes on this:

  • We live in times of change when it comes to JavaScript module formats. Many libraries are shipping both cjs and esm. There is no a strong standard on how to do it yet. I wish we could just avoid this module war, but we can't.
  • If we publish now the cjs icons under gridicons, when esm becomes more used we won't be able to use that namespace and maintain backward compatibility. We'll need to publish the individual icons under gridicons/esm, for example. This would put us in a weird position and could potentially introduce errors if the consumer is expecting a esm module when using gridicons/external, for example.
  • In the README, the esm option is deemphasized, which was intentional to mitigate decision fatigue.
  • Consumers of the API can always teach their module bundlers to make gridicons an alias for gridicons/cjs or gridicons/esm - this is probably what we'll do in Calypso.

Does this address your questions @folletto ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this is totally on me @folletto 😄

@nosolosw summed it up excellently. I'll just add that having untranspiled code available in esm/ allows the consuming project to make use of features such as tree-shaking. I.e. with some further iterations, we'll be able to do handy named imports such as

import { GridiconExternal, GridiconGarb } from 'gridicons';

while still ensuring that only the code that's relevant for these imports is being pulled in, thanks to tree-shaking -- i.e. we can get both nice named imports, and smaller bundle sizes. This is something we can't do with CommonJS.

(For reference, my original suggestion was at #283 (comment))

The different (CJS vs ESM) entrypoints are exposed through the main and esnext fields in package.json; the general idea is taken from http://2ality.com/2017/06/pkg-esnext.html (and as Andrés said, we can use e.g. webpack aliases to still allow 'pretty' import directory filenames, e.g. without the explicit cjs/ or esm/ parts).

I've also seen some (albeit not a lot) of standardization towards these names ( cjs/ or esm/), so I'd rather keep them. I'd like to think of them as an implementation detail that typically is aliased by the consumer anyway.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the reply. The technical answer is grounding for the question I have. I'm concerned on how cryptic now this is. Before "react/build" was clear. Now there's choice, with two three-letter shorthands that require knowing all of what you described to make a choice.

Granted, it's going to be packaged and published on npm, but is there any way to make this more understandable also in this library?

Also: I'm not sure if this is the case but when I read "it would compromise future backward compatibility" are we talking about Calypso or...? If Calypso already works with the more modern format, I'd suggest to ship just that and bump the requirements if needed. Or, at least, create a strong default for that, and leave the other as a secondary option.

At the very very least: can we pick a default, and have a one line explanation on when to use each of these two? Imagine a developer coming in and having no idea on the difference between the two when you write these one liners.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'Default' now depends on context: If you project is CommonJS/ES5 only, use cjs/. If it supports ES6 stuff -- most notably modules -- either natively, or thru transpilation, use esm/. This is somwhat exposed by the relevant fields in package.json, but I guess we can also document in the README. Sounds good?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@folletto @ockham wasn't aware of your comments when I posted this. Does it modifies your thinking @folletto or you still hold on this?

Copy link
Member

@jsnajdr jsnajdr Mar 13, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But wouldn't that require moving the individual ESM files to the package root (or an alias on the consumer side) as well?

@ockham Good point, that was a mistake on my side. Both CJS and ES subpackages require moving files to package root. I edited my comment accordingly.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nosolosw WFM!

Copy link
Member

@jsnajdr jsnajdr Mar 13, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In what cases is it required to specify the sideEffects flag to actually get tree-shaking?)

In case there is a top-level index.js that reexports submodules:

export { default as GridiconNotice } from './notice';
export { default as GridiconSearch } from './search';

If we import only GridiconNotice, how does Webpack and UglifyJS know they can omit the GridiconSearch import? They don't, because importing the ./search module can have side effects. For example, it can change some global variable or register a DOM listener.

The sideEffect: false flag says that no such side effects exist and unused imports can be safely removed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nosolosw Exporting just the CJS modules and forgetting about ES6 now works for me. The syntax would be:

import Gridicon from 'gridicons';
import GridiconExternal from 'gridicons/dist/external';

In future, when Webpack 4 becomes ubiquitous, we can migrate to full ES6:

import { GridiconExternal } from 'gridicons';

In the meantime, we could have a Babel transform that lets us write the named import syntax right now and transform it to a gridicons/dist/${icon} import. We have something like this for Lodash and Redux Form already in Calypso. But that's optional.

I hope I summarized everything correctly :)

#### v2.1.3 (2018-02-22)
* Icon added: "Shutter"

Expand Down
14 changes: 9 additions & 5 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,14 @@ module.exports = function( grunt ) {
]
},
dist: {
files: {
"build/index.js": "build/index.jsx",
"build/example.js": "build/example.jsx"
}
files: [{
expand: true,
cwd: 'esm/',
src: [ '**/*.js' ],
dest: 'cjs/',
ext: '.js',
filter: 'isFile'
}]
}
},

Expand Down Expand Up @@ -143,7 +147,7 @@ module.exports = function( grunt ) {
cwd: 'svg-min-react/',
src: [ '**/*.svg' ],
filter: 'isFile',
dest: 'build/'
dest: 'esm/'
}]
}
},
Expand Down
42 changes: 28 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The [Calypso](https://github.com/Automattic/wp-calypso/) / [WordPress.com](https://wordpress.com) official icon set.

## Using the Gridicon Component in your project:
## Using the Gridicon Component in your project

Note that this component requires [react](https://www.npmjs.com/package/react) to be installed in your project. If you don't want to use React, you can simply include the raw `.svg` files from the [`svg-min`](https://github.com/Automattic/gridicons/tree/master/svg-min) folder.

Expand All @@ -16,6 +16,8 @@ npm install gridicons --save

#### Usage

You can either import the whole iconset and decide at run-time which icon to use:

```
import Gridicon from 'gridicons';
//...
Expand All @@ -24,17 +26,29 @@ render() {
}
```

Or import icons individually:

```
import GridiconAddImage from 'gridicons/cjs/add-image';
//...
render() {
return <GridiconAddImage />;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can drop the render() {}example here, it doesn't really make much sense outside the context of a component. I think it's fine to simply show what theimport` will look like here.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to keep it: it instructs the consumer of the API how to use the component noting that in the general case you'll use the icon prop and if you import the individual component you don't. That's pretty clear to my eyes, but I'd rather err on the side of being obvious for new users.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about making it a functional component to have a more viable/standalone example? 😁

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

E.g.

import GridiconAddImage from 'gridicons/cjs/add-image';
//...
function MyComponent() {
    return <GridiconAddImage />;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've had too much npm for today 😅

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the render() is more accessible for folks who have just started with React, let's keep in it. :)

```

We also support importing the untranspiled ECMASCript modules by using `gridicons/esm` instead of `gridicons/cjs`.

#### Props

* `icon`: String - the icon name.
* `icon`: String - the icon name. This is ignored when importing icons individually.
* `size`: Number - (default: 24) set the size of the icon.
* `onClick`: Function - (optional) if you need a click callback.

**Notes**:

* The icon set is made to be used exactly at these pixel sizes: 12, 18, 24, 36, 48, 54, 72.
* `gridicon-my-sites` as it's a small-size version of the WordPress logo, shouldn't be used larger than 36px. If you need to use the WordPress logo in larger sizes, see the [Social Logos project](https://github.com/Automattic/social-logos).

* Individual icons are between 1K and 2K. If you use only a few, the recommended way of using the Gridicon library is to import them individually. At the moment, the main file containing the whole iconset sits at 92K.

## Icon Set Style Guidelines

Expand Down Expand Up @@ -72,7 +86,7 @@ Note that the icons in this set are tied to be used in [Calypso](https://github.
1. Switch to the branch (i.e. Pull Request) with the new icon.
2. Review the SVG source of the new icons to make sure they are clean and readable.
3. Check pixel sharpness: open in Illustrator (with "Pixel Preview") or Sketch (with "Show Pixels"), adjust if needed.
4. Run `grunt` command from terminal. It will generate `svg-min`, React (`build`), `svg-sprite`, `pdf`, `php`, and `docs`.
4. Run `grunt` command from terminal. It will generate `svg-min`, React (`esm` and `cjs`), `svg-sprite`, `pdf`, `php`, and `docs`.
5. Commit
6. Merge & delete branch

Expand All @@ -81,19 +95,19 @@ Note that the icons in this set are tied to be used in [Calypso](https://github.

This icon set uses a few automation scripts to ease the generation of new icons in a reliable way. In short, we require `node` and `grunt`. For detailed instructions check [the installation page](https://github.com/Automattic/gridicons/wiki/Installation).

Once you checkout the repo run `npm install` in the `gridicons` folder.
To generate all the fonts, svgs and so on you run `npm run build`
Once you checkout the repo run `npm install` in the `gridicons` folder.
To generate all the fonts, svgs and so on you run `npm run build`

## Publishing to npm

Note: to proceed with this you need to have write authorization to npm.

1. Create a new PR with updated `CHANGELOG.md` and updated version in `package.json` (i.e. `1.2.3-alpha.1`), see an example [here](https://github.com/Automattic/gridicons/pull/275).
2. In the "CHANGELOG.md" make sure to check all the previous commits since the previous versioned release.
1. Create a new PR with updated `CHANGELOG.md` and updated version in `package.json` (i.e. `1.2.3-alpha.1`), see an example [here](https://github.com/Automattic/gridicons/pull/275).
2. In the "CHANGELOG.md" make sure to check all the previous commits since the previous versioned release.
3. Pre-publish that PR branch on npm with `npm publish --tag next` ([more info](https://docs.npmjs.com/cli/dist-tag)). Running the `npm publish --tag next` command will send the data that you have localy to npm. Having the alpha version in the `package.json` file will create a newly tagged version npm package. Use `npm view gridicons` to look at the list of current tags. You do not need to commit changes to github in order to publish to npm, but it is recommended so folks testing know what's available.
4. Create a new update PR in a repository that makes use of Gridicons and run `npm install gridicons@next --save` (which will update `packages.json`). If you're creating the PR in [Calypso](https://github.com/Automattic/wp-calypso) and you get warnings, it might need to regenerate the shrinkwrap, in which case run `npm run update-deps`. See an example [here](https://github.com/Automattic/wp-calypso/pull/17601).
4. Create a new update PR in a repository that makes use of Gridicons and run `npm install gridicons@next --save` (which will update `packages.json`). If you're creating the PR in [Calypso](https://github.com/Automattic/wp-calypso) and you get warnings, it might need to regenerate the shrinkwrap, in which case run `npm run update-deps`. See an example [here](https://github.com/Automattic/wp-calypso/pull/17601).
5. Test if the new icons show up, and there are no regressions in the previous icons. Take a look at the `http://calypso.localhost:3000/devdocs/design/gridicons` for example.
6. If changes look good, remove the alpha postfix in the version (i.e. `1.2.3-alpha.1` to `1.2.3`) on both repositories PRs.
6. If changes look good, remove the alpha postfix in the version (i.e. `1.2.3-alpha.1` to `1.2.3`) on both repositories PRs.
7. Merge the Gridicons PR.
8. Tag the release on GitHub: `git tag -a v1.2.3 -m "Release v1.2.3"` (and push `git push origin v1.2.3`).
9. Check if it shows up in the [Releases list](https://github.com/Automattic/gridicons/releases).
Expand All @@ -106,11 +120,11 @@ Gridicons is licensed under [GNU General Public License v2 (or later)](./LICENSE

## More notes on publishing to npm
You need to have a npm user account. [Create one here](https://www.npmjs.com/signup).
Once you have created it, set up the account on you machine via
Once you have created it, set up the account on you machine via
$ `npm adduser`

Setup the 2fa with npm
$ `npm profile enable-2fa`
Setup the 2fa with npm
$ `npm profile enable-2fa`

Now everytime before you can publish
Now everytime before you can publish
You will be asked for a your [2FA code (OPT)](https://en.wikipedia.org/wiki/One-time_password)
60 changes: 36 additions & 24 deletions grunt-tasks/svg-to-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,64 @@

module.exports = function( grunt ) {
grunt.registerMultiTask( 'svg-to-react', 'Output a react component for SVGs', function() {
var component = '';
var componentExample = '';
var filesDest;
let components = '';
let componentsExample = '';
let filesDest;
const prepareIndividualIcon = require( '../sources/react/template-individual-icon' );
const prepareAllIcons = require( '../sources/react/template-all-icons' );
const prepareDevDocsExample = require( '../sources/react/template-devdocs-example' );
const {
iconsThatNeedOffset,
iconsThatNeedOffsetX,
iconsThatNeedOffsetY
} = require( '../sources/react/icons-offset' );

// Create a switch() case for each svg file
this.files.forEach( function( files ) {
files.src.forEach( function( svgFile ) {
// Clean up the filename to use for the react components
var name = svgFile.split( '.' );
name = name[0];
// Name to be used by the react components
let name = svgFile.split( '.' )[ 0 ];

// Grab the relevant bits from the file contents
var fileContent = grunt.file.read( files.cwd + svgFile );
let fileContent = grunt.file.read( files.cwd + svgFile );

// Add className, height, and width to the svg element
fileContent = fileContent.slice( 0, 4 ) +
' className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps }' +
fileContent.slice( 4, -6 ) +
fileContent.slice( -6 );

// Output the case for each icon
component += " case '" + name + "':\n" +
// Holds the switch's cases for every icon
components += " case '" + name + "':\n" +
" svg = " + fileContent + ";\n" +
" break;\n";;
" break;\n";

// Example Document
// Holds the Example Document
name = name.replace( 'gridicons-', '' );
componentExample += ' <Gridicon icon="' + name + '" size={ 48 } onClick={ this.handleClick.bind( this, \'' + name + '\' ) } />\n';
componentsExample += ' <Gridicon icon="' + name + '" size={ 48 } onClick={ this.handleClick.bind( this, \'' + name + '\' ) } />\n';

// Prepare and write to disk every individual icon separately
grunt.file.write( files.dest + name + '.js', prepareIndividualIcon( {
name,
component: fileContent,
iconsThatNeedOffset,
iconsThatNeedOffsetX,
iconsThatNeedOffsetY,
} ) );

} );

filesDest = files.dest;
} );

// React Component Wrapping
component = grunt.file.read( 'sources/react/index-header.jsx' ) + component;
component += grunt.file.read( 'sources/react/index-footer.jsx' );
// Prepare and write to disk the Design Docs Example component
grunt.file.write( filesDest + 'example.js', prepareDevDocsExample( componentsExample ) );

// Design Docs Wrapping
componentExample = grunt.file.read( 'sources/react/example-header.jsx' ) + componentExample;
componentExample += grunt.file.read( 'sources/react/example-footer.jsx' );


// Write the React component to gridicon/index.jsx
grunt.file.write( filesDest + 'index.jsx', component );
grunt.file.write( filesDest + 'example.jsx', componentExample );
// Prepare and write to disk the Gridicon React component
grunt.file.write( filesDest + 'index.js', prepareAllIcons( {
components,
iconsThatNeedOffset,
iconsThatNeedOffsetX,
iconsThatNeedOffsetY,
} ) );
} );
};
15 changes: 8 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
{
"name": "gridicons",
"version": "2.1.3",
"main": "build/index.js",
"version": "3.0.0-alpha.1",
"main": "cjs/index.js",
"esnext": "esm/index.js",
"files": [
"cjs/",
"esm/"
],
"scripts": {
"build": "grunt --verbose",
"prepublish": "npm run build"
Expand All @@ -14,12 +19,8 @@
"url": "https://github.com/Automattic/gridicons"
},
"license": "GPL-2.0+",
"files": [
"build/index.js",
"build/example.js"
],
"dependencies": {
"prop-types": "^15.5.7"
"prop-types": "^15.5.7"
},
"devDependencies": {
"babel-plugin-add-module-exports": "^0.2.1",
Expand Down
4 changes: 0 additions & 4 deletions sources/react/example-footer.jsx
View file
Open in desktop

This file was deleted.

87 changes: 87 additions & 0 deletions sources/react/icons-offset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
const iconsThatNeedOffset = [
'gridicons-add-outline',
'gridicons-add',
'gridicons-align-image-center',
'gridicons-align-image-left',
'gridicons-align-image-none',
'gridicons-align-image-right',
'gridicons-attachment',
'gridicons-bold',
'gridicons-bookmark-outline',
'gridicons-bookmark',
'gridicons-calendar',
'gridicons-cart',
'gridicons-create',
'gridicons-custom-post-type',
'gridicons-external',
'gridicons-folder',
'gridicons-heading',
'gridicons-help-outline',
'gridicons-help',
'gridicons-history',
'gridicons-info-outline',
'gridicons-info',
'gridicons-italic',
'gridicons-layout-blocks',
'gridicons-link-break',
'gridicons-link',
'gridicons-list-checkmark',
'gridicons-list-ordered',
'gridicons-list-unordered',
'gridicons-menus',
'gridicons-minus',
'gridicons-my-sites',
'gridicons-notice-outline',
'gridicons-notice',
'gridicons-plus-small',
'gridicons-plus',
'gridicons-popout',
'gridicons-posts',
'gridicons-scheduled',
'gridicons-share-ios',
'gridicons-star-outline',
'gridicons-star',
'gridicons-stats',
'gridicons-status',
'gridicons-thumbs-up',
'gridicons-textcolor',
'gridicons-time',
'gridicons-trophy',
'gridicons-user-circle',
'gridicons-reader-follow',
'gridicons-reader-following'
];
const iconsThatNeedOffsetY = [
'gridicons-align-center',
'gridicons-align-justify',
'gridicons-align-left',
'gridicons-align-right',
'gridicons-arrow-left',
'gridicons-arrow-right',
'gridicons-house',
'gridicons-indent-left',
'gridicons-indent-right',
'gridicons-minus-small',
'gridicons-print',
'gridicons-sign-out',
'gridicons-stats-alt',
'gridicons-trash',
'gridicons-underline',
'gridicons-video-camera'
];
const iconsThatNeedOffsetX = [
'gridicons-arrow-down',
'gridicons-arrow-up',
'gridicons-comment',
'gridicons-clear-formatting',
'gridicons-flag',
'gridicons-menu',
'gridicons-reader',
'gridicons-strikethrough'
];

module.exports = {
iconsThatNeedOffset,
iconsThatNeedOffsetX,
iconsThatNeedOffsetY,
};
5 changes: 0 additions & 5 deletions sources/react/index-footer.jsx
View file
Open in desktop

This file was deleted.

Loading