Parsers
Parsers
Parsers
Parsers
Parsers are the magic that you need to transform your design data into any company standard output. The parsers can be adjusted to your needs.
Let’s have a look at how they work!
Parsers are the magic that you need to transform your design data into any company standard output. The parsers can be adjusted to your needs.
Let’s have a look at how they work!
Parsers are the magic that you need to transform your design data into any company standard output. The parsers can be adjusted to your needs.
Let’s have a look at how they work!
Parsers are the magic that you need to transform your design data into any company standard output. The parsers can be adjusted to your needs.
Let’s have a look at how they work!
How does it work?
Generating icons for React
Collect icons from Figma
Let’s pretend we’re a React developer who needs to use icons in a React project. The icons are created as components in Figma and in this example we will use a parser to convert the icons into JSX components.
For the sake of simplicity, we will only focus on a single icon defined as a variant of a Figma component named “chat-alt”.
Store icons in a Specify repository
On the right you can see all of our icons in a Specify repository. Now, let’s pull them into our codebase by using the Specify CLI.
Specify CLI: Raw JSON by default
The Specify CLI is the perfect tool to help you see how Specify transforms your design data.
By default, Specify generates your assets as files. However, in this example we would like to have them in JSON first to see the data Specify returns us - see below.
If we set a file in the `path` property we will receive our icon in JSON. If we set a folder we will receive a file.
The following configuration file generates an icons.json file containing our icon in JSON.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons.json",
"filter": {
"types": [
"vector"
]
}
}
]
}After setting `icons` in the `path` property and pulling our icon with the pull command, we receive the following output: `./output/assets/icons/chat-alt/Outline.svg` - see the image on the right hand side.
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
Renaming our icon with the kebabcasify parser
We would like to use the name of our icon in our final JSX component. However, we need to use this name in kebabcase instead of its original name “chat-alt / Outline”.
Let’s use the the kebabcasify parser to do this.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons",
"filter": {
"types": [
"vector"
]
},
"parsers": [
{
"name": "kebabcasify"
}
]
}
]
}icons.json
[
{
"name": "chat-alt-outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
If we pull again, we get the following output: `./output/assets/icons/chat-alt-outline.svg`.
chat-alt-outline.svg
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H8.01M12 10H12.01M16 10H16.01M9 16H5C3.89543 16 3 15.1046 3
14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046
20.1046 16 19 16H14L9 21V16Z"
stroke="#111827" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Optimize and transform our SVG with SVGO
By default, Specify returns SVG strings as they are created in Figma. Before using the SVG string inside our final JSX component we need to optimize and transform it.
The svgo parser is based on the famous SVGO package and helps us do just that.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svgo",
"options": {
"svgo": {
"plugins": [
{
"removeDimensions": true
},
{
"removeAttrs": {
"attrs": "*:(fill|stroke)"
}
}
]
}
}
}
]chat-alt-outline.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2
2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Wrapping our SVG inside a JSX component
Now that we are satisfied with our SVG string let’s generate a JSX component out of it.
Let’s use the svg-to-jsx parser to do this.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svg-to-jsx",
"options": {
"prepend": "import React from 'react';",
"formatConfig": {
"variableFormat": "camelCase"
},
"wrapper": {
"tag": "div",
"className": "icon-{{name}} icon"
}
}
}
]chatAltOutline.jsx
import React from "react";
export const ChatAltOutline = () => (
<div className="icon-chat-alt-outline icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
Output
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
In summary
The different steps that have been executed in this example can be combined into one configuration file. This means you only have to set it up once and let Specify do the automated magic for you.
Small recap: In this example we covered how to generate JSX components using the Specify CLI. We combined and chained several parsers together to rename our icon, optimize and transform our SVG, and to generate our final JSX component.
How does it work?
Generating icons for React
Collect icons from Figma
Let’s pretend we’re a React developer who needs to use icons in a React project. The icons are created as components in Figma and in this example we will use a parser to convert the icons into JSX components.
For the sake of simplicity, we will only focus on a single icon defined as a variant of a Figma component named “chat-alt”.
Store icons in a Specify repository
On the right you can see all of our icons in a Specify repository. Now, let’s pull them into our codebase by using the Specify CLI.
Specify CLI: Raw JSON by default
The Specify CLI is the perfect tool to help you see how Specify transforms your design data.
By default, Specify generates your assets as files. However, in this example we would like to have them in JSON first to see the data Specify returns us - see below.
If we set a file in the `path` property we will receive our icon in JSON. If we set a folder we will receive a file.
The following configuration file generates an icons.json file containing our icon in JSON.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons.json",
"filter": {
"types": [
"vector"
]
}
}
]
}After setting `icons` in the `path` property and pulling our icon with the pull command, we receive the following output: `./output/assets/icons/chat-alt/Outline.svg` - see the image on the right hand side.
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
Renaming our icon with the kebabcasify parser
We would like to use the name of our icon in our final JSX component. However, we need to use this name in kebabcase instead of its original name “chat-alt / Outline”.
Let’s use the the kebabcasify parser to do this.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons",
"filter": {
"types": [
"vector"
]
},
"parsers": [
{
"name": "kebabcasify"
}
]
}
]
}icons.json
[
{
"name": "chat-alt-outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
If we pull again, we get the following output: `./output/assets/icons/chat-alt-outline.svg`.
chat-alt-outline.svg
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H8.01M12 10H12.01M16 10H16.01M9 16H5C3.89543 16 3 15.1046 3
14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046
20.1046 16 19 16H14L9 21V16Z"
stroke="#111827" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Optimize and transform our SVG with SVGO
By default, Specify returns SVG strings as they are created in Figma. Before using the SVG string inside our final JSX component we need to optimize and transform it.
The svgo parser is based on the famous SVGO package and helps us do just that.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svgo",
"options": {
"svgo": {
"plugins": [
{
"removeDimensions": true
},
{
"removeAttrs": {
"attrs": "*:(fill|stroke)"
}
}
]
}
}
}
]chat-alt-outline.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2
2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Wrapping our SVG inside a JSX component
Now that we are satisfied with our SVG string let’s generate a JSX component out of it.
Let’s use the svg-to-jsx parser to do this.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svg-to-jsx",
"options": {
"prepend": "import React from 'react';",
"formatConfig": {
"variableFormat": "camelCase"
},
"wrapper": {
"tag": "div",
"className": "icon-{{name}} icon"
}
}
}
]chatAltOutline.jsx
import React from "react";
export const ChatAltOutline = () => (
<div className="icon-chat-alt-outline icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
Output
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
In summary
The different steps that have been executed in this example can be combined into one configuration file. This means you only have to set it up once and let Specify do the automated magic for you.
Small recap: In this example we covered how to generate JSX components using the Specify CLI. We combined and chained several parsers together to rename our icon, optimize and transform our SVG, and to generate our final JSX component.
How does it work?
Generating icons for React
Collect icons from Figma
Let’s pretend we’re a React developer who needs to use icons in a React project. The icons are created as components in Figma and in this example we will use a parser to convert the icons into JSX components.
For the sake of simplicity, we will only focus on a single icon defined as a variant of a Figma component named “chat-alt”.
Store icons in a Specify repository
On the right you can see all of our icons in a Specify repository. Now, let’s pull them into our codebase by using the Specify CLI.
Specify CLI: Raw JSON by default
The Specify CLI is the perfect tool to help you see how Specify transforms your design data.
By default, Specify generates your assets as files. However, in this example we would like to have them in JSON first to see the data Specify returns us - see below.
If we set a file in the `path` property we will receive our icon in JSON. If we set a folder we will receive a file.
The following configuration file generates an icons.json file containing our icon in JSON.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons.json",
"filter": {
"types": [
"vector"
]
}
}
]
}After setting `icons` in the `path` property and pulling our icon with the pull command, we receive the following output: `./output/assets/icons/chat-alt/Outline.svg` - see the image on the right hand side.
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
Renaming our icon with the kebabcasify parser
We would like to use the name of our icon in our final JSX component. However, we need to use this name in kebabcase instead of its original name “chat-alt / Outline”.
Let’s use the the kebabcasify parser to do this.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons",
"filter": {
"types": [
"vector"
]
},
"parsers": [
{
"name": "kebabcasify"
}
]
}
]
}icons.json
[
{
"name": "chat-alt-outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
If we pull again, we get the following output: `./output/assets/icons/chat-alt-outline.svg`.
chat-alt-outline.svg
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H8.01M12 10H12.01M16 10H16.01M9 16H5C3.89543 16 3 15.1046 3
14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046
20.1046 16 19 16H14L9 21V16Z"
stroke="#111827" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Optimize and transform our SVG with SVGO
By default, Specify returns SVG strings as they are created in Figma. Before using the SVG string inside our final JSX component we need to optimize and transform it.
The svgo parser is based on the famous SVGO package and helps us do just that.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svgo",
"options": {
"svgo": {
"plugins": [
{
"removeDimensions": true
},
{
"removeAttrs": {
"attrs": "*:(fill|stroke)"
}
}
]
}
}
}
]chat-alt-outline.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2
2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Wrapping our SVG inside a JSX component
Now that we are satisfied with our SVG string let’s generate a JSX component out of it.
Let’s use the svg-to-jsx parser to do this.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svg-to-jsx",
"options": {
"prepend": "import React from 'react';",
"formatConfig": {
"variableFormat": "camelCase"
},
"wrapper": {
"tag": "div",
"className": "icon-{{name}} icon"
}
}
}
]chatAltOutline.jsx
import React from "react";
export const ChatAltOutline = () => (
<div className="icon-chat-alt-outline icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
Output
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
In summary
The different steps that have been executed in this example can be combined into one configuration file. This means you only have to set it up once and let Specify do the automated magic for you.
Small recap: In this example we covered how to generate JSX components using the Specify CLI. We combined and chained several parsers together to rename our icon, optimize and transform our SVG, and to generate our final JSX component.
How does it work?
Generating icons for React
Collect icons from Figma
Let’s pretend we’re a React developer who needs to use icons in a React project. The icons are created as components in Figma and in this example we will use a parser to convert the icons into JSX components.
For the sake of simplicity, we will only focus on a single icon defined as a variant of a Figma component named “chat-alt”.
Store icons in a Specify repository
On the right you can see all of our icons in a Specify repository. Now, let’s pull them into our codebase by using the Specify CLI.
Specify CLI: Raw JSON by default
The Specify CLI is the perfect tool to help you see how Specify transforms your design data.
By default, Specify generates your assets as files. However, in this example we would like to have them in JSON first to see the data Specify returns us - see below.
If we set a file in the `path` property we will receive our icon in JSON. If we set a folder we will receive a file.
The following configuration file generates an icons.json file containing our icon in JSON.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons.json",
"filter": {
"types": [
"vector"
]
}
}
]
}After setting `icons` in the `path` property and pulling our icon with the pull command, we receive the following output: `./output/assets/icons/chat-alt/Outline.svg` - see the image on the right hand side.
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
Renaming our icon with the kebabcasify parser
We would like to use the name of our icon in our final JSX component. However, we need to use this name in kebabcase instead of its original name “chat-alt / Outline”.
Let’s use the the kebabcasify parser to do this.
Input
.specifyrc.json
{
"repository": "@owner/repository",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Icons",
"path": "./output/assets/icons",
"filter": {
"types": [
"vector"
]
},
"parsers": [
{
"name": "kebabcasify"
}
]
}
]
}icons.json
[
{
"name": "chat-alt-outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
If we pull again, we get the following output: `./output/assets/icons/chat-alt-outline.svg`.
chat-alt-outline.svg
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H8.01M12 10H12.01M16 10H16.01M9 16H5C3.89543 16 3 15.1046 3
14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046
20.1046 16 19 16H14L9 21V16Z"
stroke="#111827" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Optimize and transform our SVG with SVGO
By default, Specify returns SVG strings as they are created in Figma. Before using the SVG string inside our final JSX component we need to optimize and transform it.
The svgo parser is based on the famous SVGO package and helps us do just that.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svgo",
"options": {
"svgo": {
"plugins": [
{
"removeDimensions": true
},
{
"removeAttrs": {
"attrs": "*:(fill|stroke)"
}
}
]
}
}
}
]chat-alt-outline.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2
2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Output
Wrapping our SVG inside a JSX component
Now that we are satisfied with our SVG string let’s generate a JSX component out of it.
Let’s use the svg-to-jsx parser to do this.
Input
.specifyrc.json
"parsers": [
...
{
"name": "svg-to-jsx",
"options": {
"prepend": "import React from 'react';",
"formatConfig": {
"variableFormat": "camelCase"
},
"wrapper": {
"tag": "div",
"className": "icon-{{name}} icon"
}
}
}
]chatAltOutline.jsx
import React from "react";
export const ChatAltOutline = () => (
<div className="icon-chat-alt-outline icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-5 5v-5Z"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
Output
icons.json
[
{
"name": "chat-alt / Outline",
"value": {
"url": "https://...",
"format": "svg"
},
"type": "vector",
"description": null
}
]Output
In summary
The different steps that have been executed in this example can be combined into one configuration file. This means you only have to set it up once and let Specify do the automated magic for you.
Small recap: In this example we covered how to generate JSX components using the Specify CLI. We combined and chained several parsers together to rename our icon, optimize and transform our SVG, and to generate our final JSX component.