Was this helpful?
Profile Icons allow you to create icon sihouttes for use in UI components or within maps (such as for markers).
Icons store the silhouette obtained from SVG path data. These icons that are added to the profile will later be referenced when using icons for various content, such as with itineraries.
The first step to working with icons is understanding how to prepare your icon data, and then creating the icons associated with a profile. You can then later use this icon to create icons for your itineraries.
You'll need to know your profile ID
You'll need to work on obtaining your and SVG view box and path data
When creating an icon, you need to provide two important pieces of information; the viewBox, and the path data. The icon will be described using this data.
While the SVG object can create numerous different types of objects, including circles, rect, animation objects, embeded objects etc, you must flatten these to only support the creation of a silhouette for the icon.
Example icon path data
The below example icon has a viewBox of 0 0 1024 1024 and the path data of
["M 100 ..."]. These two elements are used to define the path data by
providing an idea of the view box area for the path data, as well as the array
of path data strings to recreate the icon.
1<svg viewBox="0 0 1024 1024" width="32" height="32" fill="#FF0000">
2 <path d="M 100 .." />
3</svg>Note: The width, height and fill values are not stored against the profile icon. When the icon is used, it will be scaled automatically, and you can later define colour selections as necessary.
Once you have obtained your icon viewBox and path data, you can create icons that are asosciated to your profile.
An icon must profile the paths: [String!] property, as well as the
viewBox: String! and also provide name: String! to refer to the name. Name
should be unique to the other icons.
1# Creates an icon based on the supplied SVG path data. An icon consists
2# primarily of a name, paths and viewbox, but also supports attributes for
3# storing additional icon data.
4
5mutation CreateIconSilhouette {
6 # Use the createIcon() operation to create an icon
7 createIconSilhouette(
8 # Your profile ID
9 profileId: "profile/ABC123"
10 # The icon input
11 icon: { name: "My Icon", viewBox: "0 0 1024 1024", paths: ["M 100 .."] }
12 ) {
13 # Read back the created icon
14 icon {
15 # Access the Identifier, required for further query/mutations
16 __typename
17 id
18 }
19 }
20}Sandbox: Configure | Try Operation
For any icon that is created and associated with a profile, you'll be able to list those icons to see what icons are available for that user.
You can leverage the iconResources() field operation to list icons for a
specific profile ID.
1# Lists icons that have been created for a supplied profile.
2
3query ListIconSilhouettes {
4 # Use the icons() operation in order to read back icons for the profile
5 iconResources(
6<aside class="additional"><strong>You will need to have your profile ID to query</strong><br/><br/>
7 profileId: "profile/ABC123"
8 # Pagination controls for relay "cursor connections"
9 # See: https://relay.dev/graphql/connections.htm
10 first: 10 # after: "cursor"
11 ) {
12 # Using a relay style "cursor connection" specification response
13 edges {
14 # The node will contain each icon
15 node {
16 # Type and ID
17 id
18 __typename
19
20 # Name and other identifiers
21 name
22 key
23
24 # SVG Path Information for icon path silhouette
25 ... on IconSilhouette {
26 viewBox
27 paths
28 }
29 }
30 # This is the cursor of this node, you can use this for passing to "after"
31 # when requesting results after this record
32 cursor
33 }
34
35 # Total icons
36 totalCount
37 # Pagination information
38 pageInfo {
39 hasNextPage
40 endCursor
41 }
42 }
43}
44</aside>Sandbox: Configure | Try Operation
If you know what the icon ID is, you will be able to directly load the icon by
and ID. You can either use iconResource() or node() query operations.
1# Retrieves an icon by a specific ID. You can use the icon() or node() to
2# achieve this.
3
4query GetIconSilhouette {
5 # Use the icon() operation to retrieve by an ID
6 iconResource(id: "icon/ICON123") {
7 # Identifiers
8 id
9 __typename
10
11 # Obtain what you want from the icon
12 name
13 key
14
15 ... on IconSilhouette {
16 viewBox
17 paths
18 }
19 }
20}Sandbox: Configure | Try Operation
You can update icons once they have been created with the ID that is supplied
for each icon associated with a profile. To update an icon silhouette you can
leverage the updateIconSilhouette() field operation.
1# Updates the paths associated to an icon.
2
3mutation UpdateIconSilhouette {
4 # Update the icon leveraging the updateIcon() operation
5 updateIconSilhouette(
6 id: "icon/ICON123"
7 icon: {
8 # Provide the corresponding view box
9 viewBox: "0 0 1024 1024"
10 # Provide the icon silhouette path data
11 paths: ["M 100 ... "]
12 }
13 ) {
14 # Read back the modified icon
15 icon {
16 # Identifiers
17 id
18 __typename
19
20 # Data that has been updated by updateIcon operation
21 viewBox
22 paths
23 }
24 }
25}Sandbox: Configure | Try Operation
You can easily remove icons at any stage with the ID. You can leverage the
deleteIconResource() field operation.
1# Removes an icon.
2
3mutation DeleteIcon {
4 # Use the deleteIcon operation to remove an icon
5 deleteIconResource(
6 # Supply your ID of the icon to remove (no undo)
7 id: "icon/ICON123"
8 ) {
9 # Select back the ID of the icon that was removed
10 id
11 }
12}Sandbox: Configure | Try Operation
Note: If you remove icons that are used in the application, the resources will return null in the queries.
Copyright © 2024 - Made with love ❤️ in Australia.