-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split EuiIcon into dynamic imports; allow React SVG elements and exte…
…rnal urls (#1924) * Feature/icon breakapart (#1856) * dynamic import * Make the icon kinda work * progress * generate tsx from svg * Build and commit icons TSX * Updated Icon snapshots * Updated EuiIcon build to again work in dependant projects * Create a single eui.js build, bundling EuiIcon's dynamic import into the build * Tests are passing * Add a loading class to EuiIcon * Added -isLoaded and using animations for fading * update snapshots * Remove background color from isLoaded state * PR feedback * Docs for EuiIcon new abilities (#1889) Add docs for the custom svg abilities in EuiIcon * DOCS ONLY: Allow multiple snippets (#1908) * Update IconType and its proptype usage (#1913) * Expand IconType to include string * Update EuiIcon IconType to include Element, fix some TS issues, widen the EuiIcon IconType proptype * Swap Vim example logo out for SVG example logo, which contains a viewBox for IE11 compat * changelog
- Loading branch information
1 parent
3289ac1
commit 47ba51e
Showing
394 changed files
with
4,063 additions
and
3,165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| const glob = require('glob'); | ||
| const svgr = require('@svgr/core').default; | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
|
|
||
| const rootDir = path.resolve(__dirname, '..'); | ||
| const srcDir = path.resolve(rootDir, 'src'); | ||
| const iconsDir = path.resolve(srcDir, 'components', 'icon', 'assets'); | ||
|
|
||
| function pascalCase(x) { | ||
| return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) => (char1 || char2).toUpperCase()); | ||
| } | ||
|
|
||
| const iconFiles = glob.sync( | ||
| '**/*.svg', | ||
| { cwd: iconsDir, realpath: true } | ||
| ); | ||
|
|
||
| function defaultTemplate({ | ||
| template | ||
| }, opts, { | ||
| imports, | ||
| componentName, | ||
| props, | ||
| jsx, | ||
| exports | ||
| }) { | ||
| return template.ast`${imports} | ||
| const ${componentName} = (${props}) => ${jsx} | ||
| ${exports} | ||
| `; | ||
| } | ||
|
|
||
| iconFiles.forEach(async filePath => { | ||
| const svgSource = fs.readFileSync(filePath); | ||
|
|
||
| try { | ||
| const jsxSource = (await svgr( | ||
| svgSource, | ||
| { | ||
| plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], | ||
| svgoConfig: { | ||
| plugins: [ | ||
| { cleanupIDs: false }, | ||
| { prefixIds: false }, | ||
| { removeViewBox: false }, | ||
| ], | ||
| }, | ||
| svgProps: { | ||
| xmlns: 'http://www.w3.org/2000/svg' | ||
| }, | ||
| template: ({ template }, opts, { imports, componentName, props, jsx }) => template.ast` | ||
| ${imports} | ||
| const ${componentName} = (${props}) => ${jsx} | ||
| export const icon = ${componentName}; | ||
| ` | ||
| }, | ||
| { | ||
| componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}` | ||
| } | ||
| )); | ||
|
|
||
| const outputFilePath = filePath.replace(/\.svg$/, '.js'); | ||
| fs.writeFileSync(outputFilePath, jsxSource); | ||
| } catch (e) { | ||
| console.error(`Error processing ${filePath}`); | ||
| console.error(e); | ||
| process.exit(1); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.