New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@coopdigital/foundations

Package Overview
Dependencies
Maintainers
6
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@coopdigital/foundations - npm Package Compare versions

Comparing version

to
1.2.2

4

package.json
{
"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)