@gitlab/svgs 3.149.0 → 3.151.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -6
- package/dist/file_icons/LICENSE.md +1 -1
- package/dist/file_icons/file_icons/kotlin.svg +1 -1
- package/dist/file_icons/file_icons-stacked.svg +1 -1
- package/dist/file_icons/file_icons.json +1 -1
- package/dist/file_icons/file_icons.svg +1 -1
- package/dist/file_icons/file_icons_individual.json +1 -1
- package/dist/icons-stacked.svg +1 -1
- package/dist/icons.json +3 -2
- package/dist/icons.svg +1 -1
- package/dist/icons_individual.json +10 -6
- package/dist/sprite_icons/doc-new.svg +1 -1
- package/dist/sprite_icons/duo-chat-new.svg +1 -1
- package/dist/sprite_icons/folder-new.svg +1 -1
- package/dist/sprite_icons/passkey.svg +1 -0
- package/dist/sprite_icons/todo-add.svg +1 -1
- package/dist/sprite_icons/work-item-new.svg +1 -1
- package/package.json +21 -36
- package/.editorconfig +0 -13
- package/.gitpod.yml +0 -3
- package/.tool-versions +0 -2
- package/CONTRIBUTING.md +0 -12
- package/Dangerfile +0 -16
- package/postcss.config.js +0 -6
- package/tailwind.config.js +0 -13
package/README.md
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
# Gitlab SVGs
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This package manages all SVG Assets for GitLab by creating SVG sprites out of icons, and optimizing SVG illustrations.
|
|
4
4
|
|
|
5
5
|
## Previewing the SVG library
|
|
6
6
|
|
|
7
|
-
Visit the [GitLab SVG Previewer](
|
|
7
|
+
Visit the [GitLab SVG Previewer](https://design.gitlab.com/svgs) website to see, reference, and search through all available icons and illustrations.
|
|
8
8
|
|
|
9
9
|
## Requirements
|
|
10
10
|
|
|
11
11
|
- You’ll need [**yarn**](https://yarnpkg.com/en/) and [**node**](https://nodejs.org/en/download/) installed. On a Mac, you can install yarn with `brew install yarn`.
|
|
12
12
|
- For the first time, or after updating from the `main` branch, use `yarn install` to install the latest dependencies.
|
|
13
|
+
- Make sure you are in the `packages/gitlab-svgs` subdirectory.
|
|
13
14
|
|
|
14
15
|
## Commands
|
|
15
16
|
|
|
@@ -23,37 +24,45 @@ All output is saved to the `dist` folder where it’s referenced from our main a
|
|
|
23
24
|
- Review the following documentation:
|
|
24
25
|
- [Iconography design guidelines](https://design.gitlab.com/product-foundations/iconography)
|
|
25
26
|
- [Illustration design guidelines](https://design.gitlab.com/product-foundations/illustration-creation-guide)
|
|
26
|
-
- [Illustration contribution guidelines](
|
|
27
|
+
- [Illustration contribution guidelines](doc/illustration-contribution.md)
|
|
27
28
|
- Make sure you have the latest from the `main` branch in your local copy of the **gitlab-svgs** repository, then create a new local branch.
|
|
29
|
+
|
|
28
30
|
```bash
|
|
29
31
|
# Retrieve the latest updates
|
|
30
32
|
git pull
|
|
31
33
|
# Create a new local branch
|
|
32
34
|
git checkout -b new-branch-name
|
|
33
35
|
```
|
|
36
|
+
|
|
34
37
|
- Make sure that your dependencies are up to date by running `yarn install`.
|
|
35
38
|
- Export the icons or illustrations as a `.svg` file where:
|
|
36
39
|
- Icons are placed in the `sprite_icons` folder. [Read instructions below on exporting icons](#exporting-icons-from-figma).
|
|
37
40
|
- Illustrations are placed in the `illustrations/` folder. There are subfolders for illustration categories, like empty states or logos.
|
|
38
41
|
- If you are not compressing an SVG during export, you can use [SVGO](https://github.com/svg/svgo) to optimize it after you export.
|
|
42
|
+
|
|
39
43
|
```bash
|
|
40
44
|
# Optimize our `huge_test.svg` file
|
|
41
45
|
yarn run svgo ./path/to/huge_test.svg
|
|
42
46
|
```
|
|
43
|
-
|
|
47
|
+
|
|
48
|
+
- After adding the new SVGs, execute the following commands to verify your changes locally at <http://localhost:3333/>
|
|
49
|
+
|
|
44
50
|
```bash
|
|
45
51
|
# Starts a local server to preview your changes
|
|
46
52
|
yarn run dev
|
|
47
53
|
```
|
|
54
|
+
|
|
48
55
|
- Test icons by changing the settings in the **Icon configuration** panel of the local preview site and ensuring that the icon changes color and size (there are a few icons that intentionally don’t change color).
|
|
49
56
|
|
|
50
57
|

|
|
51
58
|
|
|
52
59
|
- If you are happy with the new/modified SVG, commit and push all changes (including the ones to the `dist` folder) and create a merge request.
|
|
60
|
+
|
|
53
61
|
```bash
|
|
54
62
|
# After committing your changes, use this to create a remote branch. A link will then be available to create the merge request.
|
|
55
63
|
git push -u origin new-branch-name
|
|
56
64
|
```
|
|
65
|
+
|
|
57
66
|
- Assign the merge request to a maintainer of the **GitLab SVGs** project.
|
|
58
67
|
You can find the maintainers on the [GitLab project overview page](https://about.gitlab.com/handbook/engineering/projects#gitlab-svgs).
|
|
59
68
|
|
|
@@ -72,7 +81,8 @@ Icons should only be exported after they have been added to the Pajamas UI Kit i
|
|
|
72
81
|
1. Install the [Advanced SVG Export](https://www.figma.com/community/plugin/782713260363070260/Advanced-SVG-Export) plugin. The plugin uses [SVGO](https://github.com/svg/svgo) under the hood. Use the default settings.
|
|
73
82
|
1. Select the icon and run the plugin, exporting to the `sprite_icons` folder.
|
|
74
83
|
1. Open the resulting SVG file in your text editor and remove `fill="none"` from the main `<svg>` element.
|
|
75
|
-
1. After adding the new SVGs, execute the following commands to verify your changes locally at http://localhost:3333
|
|
84
|
+
1. After adding the new SVGs, execute the following commands to verify your changes locally at <http://localhost:3333/>
|
|
85
|
+
|
|
76
86
|
```bash
|
|
77
87
|
# Starts a local server to preview your changes
|
|
78
88
|
yarn run dev
|
|
@@ -101,7 +111,9 @@ During the CI build, the following steps are done:
|
|
|
101
111
|
|
|
102
112
|
## Publishing a new version
|
|
103
113
|
|
|
104
|
-
|
|
114
|
+
To publish new versions of packages, like `@gitlab/svgs`, we use
|
|
115
|
+
[changesets](https://github.com/changesets/changesets). Learn how to [create
|
|
116
|
+
changesets and publish packages](../../doc/publishing-packages.md).
|
|
105
117
|
|
|
106
118
|
## Contributing
|
|
107
119
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48 48H0V0h48L23.505 23.648 48 48z" fill="url(#paint0_radial_4080_74)"/><defs><radialGradient id="paint0_radial_4080_74" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-48 0 0 -48 48 0)"><stop stop-color="#E44857"/><stop offset=".504" stop-color="#C711E1"/><stop offset="1" stop-color="#7F52FF"/></radialGradient></defs></svg>
|