@kong/icons 1.3.1-pr.47.8940426.0 → 1.3.1-pr.47.c3e2203.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 -4
- package/dist/kong-icons.es.js +234 -234
- package/dist/kong-icons.es.js.map +1 -1
- package/dist/kong-icons.umd.js +1 -1
- package/dist/kong-icons.umd.js.map +1 -1
- package/dist/types/components/flags/index.d.ts +1 -1
- package/dist/types/components/index.d.ts +1 -1
- package/dist/types/components/multi-color/index.d.ts +1 -1
- package/dist/types/components/solid/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Kong's open-source, Vue icon component library, partially sourced from [Google's Material Symbols](https://fonts.google.com/icons).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**View all available icons: <http://kong.github.io/icons/>**
|
|
6
6
|
|
|
7
7
|
- [Usage](#usage)
|
|
8
8
|
- [Installation](#installation)
|
|
@@ -10,6 +10,7 @@ Vue components are generated from SVG source files located in the `/svg/` direct
|
|
|
10
10
|
- [Component Props](#component-props)
|
|
11
11
|
- [Contributing \& Local Development](#contributing--local-development)
|
|
12
12
|
- [SVG file requirements](#svg-file-requirements)
|
|
13
|
+
- [Add a new icon](#add-a-new-icon)
|
|
13
14
|
- [Development Sandbox](#development-sandbox)
|
|
14
15
|
- [Lint and fix](#lint-and-fix)
|
|
15
16
|
- [Testing](#testing)
|
|
@@ -116,20 +117,33 @@ To get started, install the package dependencies
|
|
|
116
117
|
yarn install --frozen-lockfile
|
|
117
118
|
```
|
|
118
119
|
|
|
120
|
+
The exported Vue components are generated from SVG source files located in the `/svg/` child directories.
|
|
121
|
+
|
|
119
122
|
### SVG file requirements
|
|
120
123
|
|
|
121
124
|
Source SVG files **must**:
|
|
122
125
|
|
|
126
|
+
- have a **unique**, lowercase and kebab-case filename, regardless of the `/svg/*` subdirectory they are located in
|
|
127
|
+
- file names **must** not include the word `icon` (the suffix is automatically added during component generation)
|
|
128
|
+
- the resulting exported icon name will be a PascalCase file with an added `Icon` suffix (e.g. `kebab-case.svg -> KebabCaseIcon.vue`)
|
|
123
129
|
- be stored in the `/svg/` directory
|
|
124
130
|
- All solid (single-color) icon SVG files **must** be placed in the `/svg/solid/` directory
|
|
125
131
|
- All flag icon SVG files **must** be named following the format `{country code}.svg` and **must** be placed in the `/svg/flags/` directory. All country codes must be two-character strings.
|
|
126
132
|
- All multi-color SVG files **must** be placed in the `/svg/multi-color/` directory
|
|
127
|
-
- have a **unique**, `kebab-case` filename, regardless of the `/svg/*` subdirectory they are located in
|
|
128
|
-
- file names **must** not include the word `icon` (it is automatically added during component generation)
|
|
129
|
-
- the resulting exported icon name will be a PascalCase file with an added `Icon` suffix (e.g. `kebab-case.svg -> KebabCaseIcon`)
|
|
130
133
|
- have a default size of `24px` when they are exported
|
|
131
134
|
- be sourced from and approved of by Kong's Design team
|
|
132
135
|
|
|
136
|
+
### Add a new icon
|
|
137
|
+
|
|
138
|
+
To add a new SVG:
|
|
139
|
+
|
|
140
|
+
1. Ensure the SVG has been exported from the Design team (do **not** create custom SVG files)
|
|
141
|
+
2. Ensure the filename is lowercase and kebab-case
|
|
142
|
+
3. Place the SVG file into the corresponding `/svg/*` subdirectory.
|
|
143
|
+
4. Locally, run `yarn generate` to create the corresponding Vue component
|
|
144
|
+
5. Locally, run `yarn test -u` to run the tests and update the test snapshots
|
|
145
|
+
6. [Commit your changes](#committing-changes) and push up a Pull Request for review
|
|
146
|
+
|
|
133
147
|
### Development Sandbox
|
|
134
148
|
|
|
135
149
|
This repository includes a Vue sandbox app (see the `/sandbox` directory) to allow you to experiment with icons.
|