diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-07-31 12:02:48 +0300 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-07-31 12:02:48 +0300 |
commit | 4b2ea22caf5d5a2f72ce5a590f5264cd45c3eb38 (patch) | |
tree | 7bf1db29cf8e32f31920d4147225daa36b64f417 | |
parent | 8702dbcda312547dad937f63b88939ade5f0c5df (diff) | |
parent | b0ba7c72de0a864b01ec1c4be626a8a233a9009f (diff) |
Merge branch 'mg-update-icons-svg-import' into 'master'
Use file-loader for sprite icons within icon.vue
See merge request gitlab-org/gitlab-ce!31257
-rw-r--r-- | app/assets/javascripts/lib/utils/icons_path.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/icon.vue | 4 | ||||
-rw-r--r-- | config/webpack.config.js | 14 |
3 files changed, 20 insertions, 1 deletions
diff --git a/app/assets/javascripts/lib/utils/icons_path.js b/app/assets/javascripts/lib/utils/icons_path.js new file mode 100644 index 00000000000..1a1c3c8e7b3 --- /dev/null +++ b/app/assets/javascripts/lib/utils/icons_path.js @@ -0,0 +1,3 @@ +// any import of '@gitlab/svgs/dist/icons.svg' will be overridden with this +// to avoid asset duplication between sprockets and webpack +export default gon && gon.sprite_icons; diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue index 41c4c861566..fa89473da62 100644 --- a/app/assets/javascripts/vue_shared/components/icon.vue +++ b/app/assets/javascripts/vue_shared/components/icon.vue @@ -1,4 +1,6 @@ <script> +import iconsPath from '@gitlab/svgs/dist/icons.svg'; + // only allow classes in images.scss e.g. s12 const validSizes = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72]; let iconValidator = () => true; @@ -84,7 +86,7 @@ export default { computed: { spriteHref() { - return `${gon.sprite_icons}#${this.name}`; + return `${iconsPath}#${this.name}`; }, iconTestClass() { return `ic-${this.name}`; diff --git a/config/webpack.config.js b/config/webpack.config.js index 4b6a9e4b99e..442b4b4c21e 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -90,6 +90,12 @@ const alias = { // the following resolves files which are different between CE and EE ee_else_ce: path.join(ROOT_PATH, 'app/assets/javascripts'), + + // override loader path for icons.svg so we do not duplicate this asset + '@gitlab/svgs/dist/icons.svg': path.join( + ROOT_PATH, + 'app/assets/javascripts/lib/utils/icons_path.js', + ), }; if (IS_EE) { @@ -158,7 +164,15 @@ module.exports = { loader: 'graphql-tag/loader', }, { + test: /icons\.svg$/, + loader: 'file-loader', + options: { + name: '[name].[hash:8].[ext]', + }, + }, + { test: /\.svg$/, + exclude: /icons\.svg$/, loader: 'raw-loader', }, { |