diff --git a/README.md b/README.md index 5a71a6e..f8a413f 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,23 @@ All assets in this repo can also be viewed and downloaded from [oceanprotocol.com/art](https://oceanprotocol.com/art). You'll find a living styleguide there too. +- [Repository Contents](#repository-contents) +- [Typography](#typography) +- [Usage](#usage) + - [Use as npm package](#use-as-npm-package) + - [Use as a submodule](#use-as-a-submodule) + - [Usage in JavaScript/React](#usage-in-javascriptreact) +- [License](#license) + +--- + ## Repository Contents - [Logo](logo/) - [Banner](banner/) - [Jellyfish](jellyfish/) -- [Mantaray](mantaray/) +- [Manta ray](mantaray/) +- [Squid](squid/) - [GitHub](github/) ## Typography @@ -26,7 +37,11 @@ If you only need them for use on the web, you can grab them from inside the priv ## Usage -It's encouraged to use this repo as a dependency within your projects to keep the assets in sync. The whole repo is published as a npm module so just run for installation: +It's encouraged to use this repo as a dependency within your projects to keep the assets in sync. + +### Use as npm package + +The whole repo is published as a npm module so just run for installation: ```bash npm i @oceanprotocol/art @@ -59,7 +74,7 @@ git submodule foreach git pull origin master Import the required assets into your project, which will return the file source path: ```js -import Logo from './lib/art/logo/logo.svg' +import Logo from '@oceanprotocol/art/logo/logo.svg' ``` @@ -67,7 +82,7 @@ import Logo from './lib/art/logo/logo.svg' But you usually want SVG assets to be inlined for full control over styling with CSS. To achieve that, you can incorporate [svgr](https://github.com/smooth-code/svgr) into your build process to import SVG assets as actual React components: ```js -import Logo from './lib/art/logo/logo.svg' +import Logo from '@oceanprotocol/art/logo/logo.svg' ``` diff --git a/squid/README.md b/squid/README.md new file mode 100644 index 0000000..c59a99d --- /dev/null +++ b/squid/README.md @@ -0,0 +1,7 @@ +# Ocean Protocol Squid + +Use any of the variations of the Ocean Protocol squid. Make sure to always place it on a dark background like our black (#141414). + + + + diff --git a/squid/squid-back-fill.svg b/squid/squid-back-fill.svg new file mode 100644 index 0000000..7df5bd8 --- /dev/null +++ b/squid/squid-back-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/squid/squid-back-fill@2x.png b/squid/squid-back-fill@2x.png new file mode 100644 index 0000000..dd6af7e Binary files /dev/null and b/squid/squid-back-fill@2x.png differ diff --git a/squid/squid-back.svg b/squid/squid-back.svg new file mode 100644 index 0000000..74ed38a --- /dev/null +++ b/squid/squid-back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/squid/squid-back@2x.png b/squid/squid-back@2x.png new file mode 100644 index 0000000..43532c6 Binary files /dev/null and b/squid/squid-back@2x.png differ diff --git a/squid/squid-full.svg b/squid/squid-full.svg new file mode 100644 index 0000000..f5c8d3f --- /dev/null +++ b/squid/squid-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/squid/squid-full@2x.png b/squid/squid-full@2x.png new file mode 100644 index 0000000..1e19bce Binary files /dev/null and b/squid/squid-full@2x.png differ diff --git a/squid/squid-grid.svg b/squid/squid-grid.svg new file mode 100644 index 0000000..b781e61 --- /dev/null +++ b/squid/squid-grid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/squid/squid-grid@2x.png b/squid/squid-grid@2x.png new file mode 100644 index 0000000..4015cca Binary files /dev/null and b/squid/squid-grid@2x.png differ