{{ __(item.display || item.handle) }}
{{ __(item.instructions) }}
@@ -139,7 +135,26 @@ export default {
noSearchResults() {
return this.search && this.visibleSets.length === 0;
- }
+ },
+
+ iconBaseDirectory() {
+ return this.$config.get('setIconsDirectory');
+ },
+
+ iconSubFolder() {
+ return this.$config.get('setIconsFolder');
+ },
+
+ iconDirectory() {
+ let iconDirectory = this.$config.get('setIconsDirectory');
+ let iconFolder = this.$config.get('setIconsFolder');
+
+ if (iconFolder) {
+ iconDirectory = iconDirectory+'/'+iconFolder;
+ }
+
+ return iconDirectory;
+ },
},
@@ -221,7 +236,23 @@ export default {
if (! this.hasMultipleSets) {
this.addSet(this.sets[0].sets[0].handle);
}
- }
+ },
+
+ groupIconName(name) {
+ if (! name) return 'folder-generic';
+
+ return this.iconSubFolder
+ ? this.iconSubFolder+'/'+name
+ : name;
+ },
+
+ setIconName(name) {
+ if (! name) return 'light/add';
+
+ return this.iconSubFolder
+ ? this.iconSubFolder+'/'+name
+ : name;
+ },
}
diff --git a/src/Fieldtypes/Icon.php b/src/Fieldtypes/Icon.php
index 33ab650204..1c9e5332c0 100644
--- a/src/Fieldtypes/Icon.php
+++ b/src/Fieldtypes/Icon.php
@@ -2,10 +2,12 @@
namespace Statamic\Fieldtypes;
+use Illuminate\Filesystem\Filesystem;
use Statamic\Facades\File;
use Statamic\Facades\Folder;
use Statamic\Facades\Path;
use Statamic\Fields\Fieldtype;
+use Statamic\Support\Str;
class Icon extends Fieldtype
{
@@ -14,6 +16,8 @@ class Icon extends Fieldtype
protected $categories = ['media'];
protected $icon = 'icon_picker';
+ protected static $customSvgIcons = [];
+
public function preload(): array
{
[$path, $directory, $folder, $hasConfiguredDirectory] = $this->resolveParts();
@@ -39,11 +43,13 @@ protected function configFieldItems(): array
'display' => __('Directory'),
'instructions' => __('statamic::fieldtypes.icon.config.directory'),
'type' => 'text',
+ 'placeholder' => 'vendor/statamic/cms/resources/svg/icons',
],
'folder' => [
'display' => __('Folder'),
'instructions' => __('statamic::fieldtypes.icon.config.folder'),
'type' => 'text',
+ 'placeholder' => static::DEFAULT_FOLDER,
],
'default' => [
'display' => __('Default Value'),
@@ -85,4 +91,32 @@ private function resolveParts()
$hasConfiguredDirectory,
];
}
+
+ /**
+ * Provide custom SVG icons to script.
+ *
+ * @param string $directory
+ * @param string|null $folder
+ */
+ public static function provideCustomSvgIconsToScript($directory, $folder = null)
+ {
+ $path = Str::removeRight(Path::tidy($directory.'/'.$folder), '/');
+
+ static::$customSvgIcons[$path] = collect(app(Filesystem::class)->files($path))
+ ->filter(fn ($file) => strtolower($file->getExtension()) === 'svg')
+ ->keyBy(fn ($file) => pathinfo($file->getBasename(), PATHINFO_FILENAME))
+ ->map
+ ->getContents()
+ ->all();
+ }
+
+ /**
+ * Get custom SVG icons for script.
+ *
+ * @return array
+ */
+ public static function getCustomSvgIcons()
+ {
+ return static::$customSvgIcons;
+ }
}
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index bac456f7f6..6b04779fbd 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -2,15 +2,20 @@
namespace Statamic\Fieldtypes;
+use Statamic\Facades\File;
use Statamic\Fields\Fieldset;
use Statamic\Fields\FieldTransformer;
use Statamic\Fields\Fieldtype;
+use Statamic\Statamic;
use Statamic\Support\Arr;
class Sets extends Fieldtype
{
protected $selectable = false;
+ protected static $iconsDirectory = null;
+ protected static $iconsFolder = 'plump';
+
/**
* Converts the "sets" array of a Replicator (or Bard) field into what the
*
Vue component is expecting, within either the Blueprint
@@ -83,13 +88,14 @@ public function preProcessConfig($sets)
return collect($sets)->map(function ($group, $groupHandle) {
return array_merge($group, [
'handle' => $groupHandle,
- 'sets' => collect($group['sets'])->map(function ($config, $name) {
- return array_merge($config, [
- 'handle' => $name,
- 'id' => $name,
- 'fields' => (new NestedFields)->preProcessConfig(array_get($config, 'fields', [])),
- ]);
- })
+ 'sets' => collect($group['sets'])
+ ->map(function ($config, $name) {
+ return array_merge($config, [
+ 'handle' => $name,
+ 'id' => $name,
+ 'fields' => (new NestedFields)->preProcessConfig(array_get($config, 'fields', [])),
+ ]);
+ })
->values()
->all(),
]);
@@ -126,4 +132,37 @@ public function process($tabs)
})
->all();
}
+
+ /**
+ * Allow the user to set custom icon directory and/or folder for SVG set icons.
+ *
+ * @param string|null $directory
+ * @param string|null $folder
+ */
+ public static function setIconsDirectory($directory = null, $folder = null)
+ {
+ // If they are specifying new base directory, ensure we do not assume sub-folder
+ if ($directory) {
+ static::$iconsDirectory = $directory;
+ static::$iconsFolder = $folder;
+ }
+
+ // Of if they are specifying just a sub-folder, use that with original base directory
+ elseif ($folder) {
+ static::$iconsFolder = $folder;
+ }
+
+ // Then provide to script for selector components in blueprint config
+ Statamic::provideToScript([
+ 'setIconsDirectory' => static::$iconsDirectory,
+ 'setIconsFolder' => static::$iconsFolder,
+ ]);
+
+ // And finally, provide the file contents of all custom svg icons to script,
+ // but only if custom directory because our component cannot
+ // reference custom paths at runtime without a full Vite re-build
+ if ($directory) {
+ Icon::provideCustomSvgIconsToScript($directory, $folder);
+ }
+ }
}
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index 6239bc7376..4b4055b422 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -9,6 +9,7 @@
use Statamic\Facades\Preference;
use Statamic\Facades\Site;
use Statamic\Facades\User;
+use Statamic\Fieldtypes\Icon;
use Statamic\Statamic;
use Statamic\Support\Str;
use voku\helper\ASCII;
@@ -67,6 +68,7 @@ private function protectedVariables()
'livePreview' => config('statamic.live_preview'),
'permissions' => $this->permissions($user),
'hasLicenseBanner' => $licenses->invalid() || $licenses->requestFailed(),
+ 'customSvgIcons' => Icon::getCustomSvgIcons(),
];
}
diff --git a/src/Providers/CpServiceProvider.php b/src/Providers/CpServiceProvider.php
index f526f9e738..d6950870b9 100644
--- a/src/Providers/CpServiceProvider.php
+++ b/src/Providers/CpServiceProvider.php
@@ -10,6 +10,7 @@
use Statamic\Extensions\Translation\Loader;
use Statamic\Extensions\Translation\Translator;
use Statamic\Facades\User;
+use Statamic\Fieldtypes\Sets;
use Statamic\Http\View\Composers\CustomLogoComposer;
use Statamic\Http\View\Composers\FieldComposer;
use Statamic\Http\View\Composers\JavascriptComposer;
@@ -36,6 +37,8 @@ public function boot()
return "";
});
+ Sets::setIconsDirectory();
+
$this->registerMiddlewareGroups();
}
diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php
index 834fe9ce5b..dcdf84eccb 100644
--- a/tests/Fieldtypes/SetsTest.php
+++ b/tests/Fieldtypes/SetsTest.php
@@ -4,6 +4,8 @@
use Statamic\Fields\ConfigField;
use Statamic\Fields\Field;
+use Statamic\Fieldtypes\Sets;
+use Statamic\Statamic;
use Tests\TestCase;
class SetsTest extends TestCase
@@ -390,4 +392,46 @@ public function it_processes()
],
], $field->process()->value());
}
+
+ /** @test */
+ public function it_provides_statamic_plump_icons_to_script_by_default()
+ {
+ $jsonVariables = Statamic::jsonVariables(request());
+
+ $this->assertNull($jsonVariables['setIconsDirectory']);
+ $this->assertEquals('plump', $jsonVariables['setIconsFolder']);
+ }
+
+ /** @test */
+ public function it_can_provide_custom_user_icons_subfolder()
+ {
+ Sets::setIconsDirectory(folder: 'light');
+
+ $jsonVariables = Statamic::jsonVariables(request());
+
+ $this->assertNull($jsonVariables['setIconsDirectory']);
+ $this->assertEquals('light', $jsonVariables['setIconsFolder']);
+ }
+
+ /** @test */
+ public function it_can_provide_custom_user_icons_directory()
+ {
+ Sets::setIconsDirectory($customDir = resource_path());
+
+ $jsonVariables = Statamic::jsonVariables(request());
+
+ $this->assertEquals($customDir, $jsonVariables['setIconsDirectory']);
+ $this->assertEquals(null, $jsonVariables['setIconsFolder']);
+ }
+
+ /** @test */
+ public function it_can_provide_custom_user_icons_directory_and_sub_folder()
+ {
+ Sets::setIconsDirectory($customDir = base_path(), $customSubFolder = 'resources');
+
+ $jsonVariables = Statamic::jsonVariables(request());
+
+ $this->assertEquals($customDir, $jsonVariables['setIconsDirectory']);
+ $this->assertEquals($customSubFolder, $jsonVariables['setIconsFolder']);
+ }
}