Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: initial import of all icons from Figma #1

Merged
merged 4 commits into from
Aug 25, 2023
Merged

Conversation

AnnaRybkina
Copy link
Contributor

@AnnaRybkina AnnaRybkina commented Aug 24, 2023

Background: https://nmp-jira.atlassian.net/browse/WARP-221, https://nmp-jira.atlassian.net/browse/WARP-223

  • Add script to import icons from Figma (mostly a rip off from Fabric)
  • Import icons
  • added vite as a build tool to run Warp for styling
  • build icons? - working as it was in Fabric, title with hardcoded text is added from the yml file. It also optimizes with svgo but I haven't changed anything since before
  • preview icons- working but do not know how much time it is worth spending on it
image

@AnnaRybkina AnnaRybkina force-pushed the import-icons branch 2 times, most recently from 2f34ec6 to 7e8d4a1 Compare August 24, 2023 10:02
@AnnaRybkina AnnaRybkina force-pushed the import-icons branch 2 times, most recently from e9854dd to 3612fbd Compare August 25, 2023 09:08
@AnnaRybkina AnnaRybkina requested a review from a team August 25, 2023 09:14
Comment on lines 13 to 14
return {
name: path.parse(svgPath).name,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we show the "icon name" instead of just "icon_16":
image
image
Something like this for example:

Suggested change
return {
name: path.parse(svgPath).name,
const regex = /dist\/(.*?)\/icon/;
const match = svgPath.match(regex);
let iconName = path.parse(svgPath).name;
if (match && match[1]) {
iconName = match[1];
}
return {
name: iconName,

const data = fs.readFileSync(svgPath, "utf-8");
const {size} = getNameAndSize(svgPath);
return {
name: path.parse(svgPath).name,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will return the name of the svg file (like icon_24), while it's more the parent directory that we'd need for the preview page (like active-ads). I tested that this would give us what we need:

Suggested change
name: path.parse(svgPath).name,
name: path.basename(path.dirname(svgPath)),

Wdyt?

Screenshot 2023-08-25 at 13 20 19

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh that was a way cleaner way to do it!

Copy link
Contributor Author

@AnnaRybkina AnnaRybkina Aug 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is great, committed 🙌 3727939

Copy link
Contributor

@siljec siljec left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work Anna 🤩❤️

Copy link
Contributor

@BalbinaK BalbinaK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 🙌

@AnnaRybkina AnnaRybkina changed the title fix: initial import of all icons from Figma feat: initial import of all icons from Figma Aug 25, 2023
@AnnaRybkina AnnaRybkina merged commit 23cccb2 into main Aug 25, 2023
@AnnaRybkina AnnaRybkina deleted the import-icons branch August 25, 2023 11:46
github-actions bot pushed a commit that referenced this pull request Sep 12, 2023
# 1.0.0-alpha.1 (2023-09-12)

### Features

* add automated release ([#7](#7)) ([d0cfcc1](d0cfcc1))
* build react/vue/elements icons ([#4](#4)) ([362deca](362deca))
* initial import of all icons from Figma ([#1](#1)) ([23cccb2](23cccb2))
@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.0.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this pull request Sep 20, 2023
# 1.0.0 (2023-09-20)

### Features

* add automated release ([#7](#7)) ([d0cfcc1](d0cfcc1))
* build react/vue/elements icons ([#4](#4)) ([362deca](362deca))
* initial import of all icons from Figma ([#1](#1)) ([23cccb2](23cccb2))
github-actions bot pushed a commit that referenced this pull request Sep 20, 2023
# 1.0.0-next.1 (2023-09-20)

### Features

* add automated release ([#7](#7)) ([d0cfcc1](d0cfcc1))
* build react/vue/elements icons ([#4](#4)) ([362deca](362deca))
* initial import of all icons from Figma ([#1](#1)) ([23cccb2](23cccb2))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants