Element icons

SVG import script

A large number of SVGs are made available to assign to elements. Because of the potential size of the resource, a script is available to automate the import process so less manual intervention is required.

Copying the files

SVG files can be copied in their raw state to the folder resources/assets/svgs/elements. The script expects that they are named and that a CamelCase version of the name can be created as such. For example "1 Page Vision", would become "Icon1PageVision" (it needs to be prefixed since Vue components cannot start with a number).

Preparing the target file

When the SVGs are processed, a Vue file is targeted to insert the new names and imports. The SVGs are declared as async components to reduce performance impact on the application.

The file is located at resources/ts/Components/Admin/Element/Icon/icons.ts, and needs to have the following contents in order to automate the process correctly:

import { App, defineAsyncComponent } from "vue";

export default function( app: App ){

    app
    // Start icons

}

// Start list

// Start icons is where the list of dynamic imports will be added. // Start list is where the list of names of the icons will be added, to allow for a human readable name. The resulting file should look like this:

import { App, defineAsyncComponent } from "vue";

export default function( app: App ){

    app
    .component('IconLetterFromTheFuture', defineAsyncComponent(() => import("./Icons/IconLetterFromTheFuture.svg")))

}

export const elementIconList = {
    'IconLetterFromTheFuture' : 'Letter From The Future',
}

How to run

Important note

This script was run once and then manually adjusted with pre-existing (Vue-based) icons. If it should be run again in future, some manually merging will need to take place unless the pre-existing icons are removed/refactored to be plain SVGs.

Prerequisites

You should have xmllint available in your PATH. This makes the SVGs more readable and easier to edit manually later. The script automatically sends the SVGs through xmllint.

1. Copy the SVGs to resources/assets/svgs/elements
2. Prepare the file in resources/ts/Components/Admin/Element/Icon/icons.ts
3. Run the Laravel command php artisan import:element-svgs

The icons should be parsed and copied to resources/ts/Components/Admin/Element/Icon/Icons, and the icons file should be populated.

The element icons can be used in the application using the following component:

import ElementIcon from "@/Components/Admin/Element/Icon/ElementIcon.vue";

<element-icon name="IconLetterFromTheFuture" :size="80" />