@coopdigital/foundations
Advanced tools
Comparing version
{ | ||
"name": "@coopdigital/foundations", | ||
"version": "1.2.1", | ||
"version": "1.2.2", | ||
"description": "Our foundations are the base CSS and variables that we build our products on", | ||
@@ -36,3 +36,3 @@ "main": "dist/foundations.css", | ||
}, | ||
"gitHead": "28cb87a0948cd82beddc5f3f370a99c9be5a404f" | ||
"gitHead": "bccdf962955fa9d86046172cc861197c03e7828d" | ||
} |
@@ -73,2 +73,3 @@ # Co-op Foundations | ||
## Icon usage | ||
Icons are separted out as separate SVG files in `src` and combined in the build script into an SVG sprite called `coop-icon-sprite.svg`. | ||
@@ -81,2 +82,3 @@ | ||
### Using the icons in your project | ||
Once you have the icons loaded in your front-end you can referrence them by using: | ||
@@ -86,3 +88,3 @@ | ||
<svg> | ||
<use xlink:href="coop-icon-sprite.svg#[icon-file-name]"></use> | ||
<use xlink:href="coop-icon-sprite.svg#[icon-file-name]"></use> | ||
</svg> | ||
@@ -94,2 +96,3 @@ ``` | ||
### Using the icons accessibily | ||
You should always try to pair an icon with text if possible as suggested in the [Experience Library guidelines on icons](https://www.coop.co.uk/experience-library/foundations/icon-set.html) | ||
@@ -101,7 +104,7 @@ | ||
<p> | ||
<svg aria-hidden=“true”> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
</svg> | ||
Basket | ||
<svg aria-hidden="“true”"> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
</svg> | ||
Basket | ||
</p> | ||
@@ -114,4 +117,4 @@ ``` | ||
<svg role="img"> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
</svg> | ||
@@ -121,5 +124,6 @@ ``` | ||
### CSS | ||
There are some CSS classes to space and size the icons. The scooter being rectangular takes a modifier class to double the width. | ||
``` CSS | ||
```CSS | ||
.coop-i { | ||
@@ -181,3 +185,2 @@ fill: currentColor; | ||
## Contributing | ||
@@ -187,2 +190,2 @@ | ||
[See our migration guide here](./docs/migration.md) | ||
[See our migration guide here](../../docs/migrations/@coopdigital-foundations-migration.md) |
183
1.67%505521
-0.25%50
-1.96%