Adding Icons

The Geocortex Web SDK supports adding custom icons to applications. Icon components are created with the createSvgIcon function. These icon components can then be registered to make them available to app config, layout, and other built-in web components.

To create a new SVG icon, create a new tsx file that exports the createSvgIcon function. This function will create a React component icon that can be used in Geocortex Web Components.

src/icons/CustomIcon.tsx
import createSvgIcon from "@vertigis/web/ui/icons/utils/createSvgIcon";
import React from "react";
export default createSvgIcon(
<path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z" />
);

You can then register this icon with the library using the registry.registerIcon(...) function. This allows it to be used in the app config, layout, and built-in web components like DynamicIcon, or Button.

note

Icon IDs should be chosen to be globally unique - one easy way to ensure this is to preface the icon ID with your company name.

src/index.ts
import { LibraryRegistry } from "@vertigis/web/config";
import ComponentWithIcon from "./components/ComponentWithIcon/ComponentWithIcon";
import ComponentWithIconModel from "./components/ComponentWithIcon/ComponentWithIconModel";
import CustomIcon from "./icons/CustomIcon";
const LAYOUT_NAMESPACE = "my.custom.namespace";
export default function (registry: LibraryRegistry): void {
registry.registerComponent({
name: "component-with-icon",
namespace: LAYOUT_NAMESPACE,
getComponentType: () => ComponentWithIcon,
itemType: "component-with-icon-model",
title: "Component With Icon",
});
registry.registerModel({
getModel: (config) => new ComponentWithIconModel(config),
itemType: "component-with-icon-model",
});
registry.registerIcon({
id: "my-company-name-arrow",
getComponentType: () => CustomIcon,
});
}

Next Steps#

Use Icons in Components

Learn how to use icons in custom components