Custom Icons - Make sure custom icons are added into the default SVG …

…sprite so these are properly styled within in the _icon.scss file. Add mention into the doc that icon need to be uniquely named to avoid issues.
area17 · Nov 23, 2022 · 77c7cda · 77c7cda
1 parent d45b355
commit 77c7cda
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/docs/src/block-editor/creating-a-block-editor.md b/docs/src/block-editor/creating-a-block-editor.md
@@ -170,6 +170,8 @@ Using `php artisan twill:list:blocks` will list all blocks and repeaters. There
 
 ##### Using custom icons
 
+Custom icons need to be named differently from default icons to avoid issues when creating the SVG sprites.
+
 If you want to use custom icons in a block, you have to define the source directory's path in `config/twill.php`. Add it under `block_editor.directories.source.icons` key:
 
 filename: ```config/twill.php```

diff --git a/views/partials/icons/svg-sprite.blade.php b/views/partials/icons/svg-sprite.blade.php
@@ -4,8 +4,4 @@
     @include('twill::partials.icons.icons-files-svg')
 
     @include('twill::partials.icons.icons-wysiwyg-svg')
-
-    @if (\Illuminate\Support\Facades\View::exists('twill::partials.icons.icons-custom-svg'))
-        @include('twill::partials.icons.icons-custom-svg')
-    @endif
 </div>
diff --git a/vue.config.js b/vue.config.js
@@ -69,26 +69,30 @@ const svgConfig = (suffix = null) => {
   }
 }
 
-const plugins = [
-  new CleanWebpackPlugin(),
-  new SVGSpritemapPlugin(`${srcDirectory}/icons/**/*.svg`, svgConfig()),
-  new SVGSpritemapPlugin(`${srcDirectory}/icons-files/**/*.svg`, svgConfig('files')),
-  new SVGSpritemapPlugin(`${srcDirectory}/icons-wysiwyg/**/*.svg`, svgConfig('wysiwyg')),
-  new WebpackAssetsManifest({
-    output: `${assetsDir}/twill-manifest.json`,
-    publicPath: true,
-    customize (entry, original, manifest, asset) {
-      const search = new RegExp(`${assetsDir.replace(/\//gm, '\/')}\/(css|fonts|js|icons)\/`, 'gm')
-      return {
-        key: entry.key.replace(search, '')
-      }
-    }
-  })
-]
+const plugins = [ new CleanWebpackPlugin() ]
 
+// Default icons and optionnal custom admin icons
+// Warning : user need to make sure each SVG files are named uniquely
+const iconDirectories = [`${srcDirectory}/icons/**/*.svg`];
 if (fs.existsSync(`${srcDirectory}/icons-custom`) && fs.readdirSync(`${srcDirectory}/icons-custom`).length !== 0) {
-  plugins.push(new SVGSpritemapPlugin(`${srcDirectory}/icons-custom/**/*.svg`, svgConfig('custom')));
+  iconDirectories.push(`${srcDirectory}/icons-custom/**/*.svg`);
 }
+plugins.push(new SVGSpritemapPlugin(iconDirectories, svgConfig()))
+// File format icons
+plugins.push(new SVGSpritemapPlugin(`${srcDirectory}/icons-files/**/*.svg`, svgConfig('files')))
+// Wysiwyg icons
+plugins.push(new SVGSpritemapPlugin(`${srcDirectory}/icons-wysiwyg/**/*.svg`, svgConfig('wysiwyg')))
+
+plugins.push(new WebpackAssetsManifest({
+  output: `${assetsDir}/twill-manifest.json`,
+  publicPath: true,
+  customize (entry, original, manifest, asset) {
+    const search = new RegExp(`${assetsDir.replace(/\//gm, '\/')}\/(css|fonts|js|icons)\/`, 'gm')
+    return {
+      key: entry.key.replace(search, '')
+    }
+  }
+}))
 
 if (!isProd) {
   plugins.push(new WebpackNotifierPlugin({