@kong/icons 1.3.1-pr.47.72e2793.0 → 1.3.1-pr.47.8940426.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 +4 -18
- package/dist/kong-icons.es.js +206 -206
- 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
|
+
Vue components are generated from SVG source files located in the `/svg/` directory.
|
6
6
|
|
7
7
|
- [Usage](#usage)
|
8
8
|
- [Installation](#installation)
|
@@ -10,7 +10,6 @@ Kong's open-source, Vue icon component library, partially sourced from [Google's
|
|
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)
|
14
13
|
- [Development Sandbox](#development-sandbox)
|
15
14
|
- [Lint and fix](#lint-and-fix)
|
16
15
|
- [Testing](#testing)
|
@@ -117,33 +116,20 @@ To get started, install the package dependencies
|
|
117
116
|
yarn install --frozen-lockfile
|
118
117
|
```
|
119
118
|
|
120
|
-
The exported Vue components are generated from SVG source files located in the `/svg/` child directories.
|
121
|
-
|
122
119
|
### SVG file requirements
|
123
120
|
|
124
121
|
Source SVG files **must**:
|
125
122
|
|
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`)
|
129
123
|
- be stored in the `/svg/` directory
|
130
124
|
- All solid (single-color) icon SVG files **must** be placed in the `/svg/solid/` directory
|
131
125
|
- 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.
|
132
126
|
- 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`)
|
133
130
|
- have a default size of `24px` when they are exported
|
134
131
|
- be sourced from and approved of by Kong's Design team
|
135
132
|
|
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
|
-
|
147
133
|
### Development Sandbox
|
148
134
|
|
149
135
|
This repository includes a Vue sandbox app (see the `/sandbox` directory) to allow you to experiment with icons.
|