Skip to content

Commit

Permalink
Mulighet til å laste ned ikoner i PNG-format (#971)
Browse files Browse the repository at this point in the history
* converterer svg til png format

* gitignore update

* oppdatert build steps package.json

* kan nå laste ned alle ikoner i png format

* zipper svg og png riktig

* git fix

* oppdaterte ikon svg zip

* info om bruk av png ikoner

* lint fix

* la til png zip
  • Loading branch information
KenAJoh committed Feb 2, 2021
1 parent 449f9a3 commit 06807c7
Show file tree
Hide file tree
Showing 15 changed files with 154 additions and 66 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -101,5 +101,8 @@ examples/webpack/out
*-exports.less
**/css/
*/figma-api/icons
*/ds-icons/png
packages/**/css
utilities/**/css

*/static/*.zip
Binary file added @navikt/ds-icons/NAV-ikonpakke-png.zip
Binary file not shown.
Binary file added @navikt/ds-icons/NAV-ikonpakke-svg.zip
Binary file not shown.
10 changes: 10 additions & 0 deletions @navikt/ds-icons/figma-api/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const path = require("path");
const pLimit = require("p-limit");
const rimraf = require("rimraf");
const startCase = require("lodash.startcase");
const zipdir = require("zip-dir");

const manipulateSvg = (svgString) => {
let changed = svgString.replace(/width="[^"]*"/, `width="1em"`);
Expand Down Expand Up @@ -104,6 +105,15 @@ const main = async () => {
console.log(`\nCould not download ${misses.length} icons\n`);
} else {
console.log("\nDownloaded all icons from Figma successfully!\n");
await zipdir(
"./svg/",
{ saveTo: "NAV-ikonpakke-svg.zip" },
function (err, buffer) {
if (err) {
console.error(err);
}
}
);
}
};

Expand Down
46 changes: 23 additions & 23 deletions @navikt/ds-icons/figma-api/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "Add",
"description": "",
"created_at": "2021-01-21T15:42:17.238Z",
"updated_at": "2021-01-21T15:42:17.238Z",
"updated_at": "2021-02-01T15:08:33.534Z",
"pageName": "Interface",
"visible": true
},
Expand All @@ -27,7 +27,7 @@
"name": "AddFilled",
"description": "",
"created_at": "2021-01-21T15:42:48.215Z",
"updated_at": "2021-01-21T15:42:48.215Z",
"updated_at": "2021-02-01T15:08:33.543Z",
"pageName": "Interface",
"visible": true
},
Expand Down Expand Up @@ -163,15 +163,15 @@
"name": "Bookmark",
"description": "",
"created_at": "2020-07-01T10:37:42.877Z",
"updated_at": "2021-01-18T12:32:14.190Z",
"updated_at": "2021-02-01T15:06:12.663Z",
"pageName": "File",
"visible": true
},
{
"name": "BookmarkFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.585Z",
"updated_at": "2021-01-28T14:51:50.737Z",
"updated_at": "2021-02-01T15:06:12.628Z",
"pageName": "File",
"visible": true
},
Expand All @@ -195,15 +195,15 @@
"name": "Braille",
"description": "",
"created_at": "2020-07-01T10:37:42.881Z",
"updated_at": "2021-01-18T12:32:14.305Z",
"updated_at": "2021-02-01T15:08:33.590Z",
"pageName": "Handicap",
"visible": true
},
{
"name": "BrailleFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.306Z",
"updated_at": "2021-01-28T14:51:50.704Z",
"updated_at": "2021-02-01T15:08:33.524Z",
"pageName": "Handicap",
"visible": true
},
Expand Down Expand Up @@ -467,15 +467,15 @@
"name": "Data",
"description": "",
"created_at": "2020-07-20T10:32:39.033Z",
"updated_at": "2021-01-18T12:32:13.918Z",
"updated_at": "2021-02-01T15:06:12.645Z",
"pageName": "File",
"visible": true
},
{
"name": "DataFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.599Z",
"updated_at": "2021-01-28T14:51:51.114Z",
"updated_at": "2021-02-01T15:06:12.670Z",
"pageName": "File",
"visible": true
},
Expand Down Expand Up @@ -779,7 +779,7 @@
"name": "EyeFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.321Z",
"updated_at": "2021-01-26T09:00:48.299Z",
"updated_at": "2021-02-01T15:10:58.447Z",
"pageName": "Privacy",
"visible": true
},
Expand Down Expand Up @@ -835,15 +835,15 @@
"name": "Female",
"description": "",
"created_at": "2020-07-01T10:37:42.855Z",
"updated_at": "2020-11-24T11:50:38.560Z",
"updated_at": "2021-02-01T12:32:57.219Z",
"pageName": "Gender",
"visible": true
},
{
"name": "FemaleFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.227Z",
"updated_at": "2021-01-28T14:51:50.962Z",
"updated_at": "2021-02-01T15:02:07.698Z",
"pageName": "Gender",
"visible": true
},
Expand Down Expand Up @@ -1027,15 +1027,15 @@
"name": "GuideDog",
"description": "",
"created_at": "2020-07-01T10:37:42.922Z",
"updated_at": "2021-01-18T12:32:14.242Z",
"updated_at": "2021-02-01T15:08:33.582Z",
"pageName": "Handicap",
"visible": true
},
{
"name": "GuideDogFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.295Z",
"updated_at": "2021-01-28T14:51:51.024Z",
"updated_at": "2021-02-01T15:08:33.568Z",
"pageName": "Handicap",
"visible": true
},
Expand Down Expand Up @@ -1387,15 +1387,15 @@
"name": "MaleFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.743Z",
"updated_at": "2021-01-28T14:51:50.956Z",
"updated_at": "2021-02-01T15:02:07.692Z",
"pageName": "Gender",
"visible": true
},
{
"name": "Minus",
"description": "",
"created_at": "2021-01-21T15:42:17.235Z",
"updated_at": "2021-01-21T15:42:17.235Z",
"updated_at": "2021-02-01T15:08:33.561Z",
"pageName": "Interface",
"visible": true
},
Expand All @@ -1419,7 +1419,7 @@
"name": "MinusFilled",
"description": "",
"created_at": "2021-01-21T15:42:48.221Z",
"updated_at": "2021-01-21T15:43:25.600Z",
"updated_at": "2021-02-01T15:08:33.574Z",
"pageName": "Interface",
"visible": true
},
Expand Down Expand Up @@ -1515,7 +1515,7 @@
"name": "NeutralFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.231Z",
"updated_at": "2021-01-18T12:32:13.654Z",
"updated_at": "2021-02-01T15:02:07.683Z",
"pageName": "Gender",
"visible": true
},
Expand Down Expand Up @@ -1603,15 +1603,15 @@
"name": "Passport",
"description": "",
"created_at": "2020-07-01T10:37:43.078Z",
"updated_at": "2020-07-01T10:37:43.078Z",
"updated_at": "2021-02-01T15:10:58.437Z",
"pageName": "International",
"visible": true
},
{
"name": "PassportFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.757Z",
"updated_at": "2021-01-18T12:32:14.018Z",
"updated_at": "2021-02-01T15:10:58.429Z",
"pageName": "International",
"visible": true
},
Expand Down Expand Up @@ -1899,7 +1899,7 @@
"name": "SearchFilled",
"description": "",
"created_at": "2021-01-11T13:37:55.346Z",
"updated_at": "2021-01-21T15:08:10.671Z",
"updated_at": "2021-02-01T15:08:33.552Z",
"pageName": "Interface",
"visible": true
},
Expand Down Expand Up @@ -2179,15 +2179,15 @@
"name": "Task",
"description": "",
"created_at": "2021-01-21T12:56:37.963Z",
"updated_at": "2021-01-21T12:56:37.963Z",
"updated_at": "2021-02-01T15:06:12.654Z",
"pageName": "File",
"visible": true
},
{
"name": "TaskFilled",
"description": "",
"created_at": "2021-01-21T12:56:37.968Z",
"updated_at": "2021-01-21T12:56:37.968Z",
"updated_at": "2021-02-01T15:06:12.636Z",
"pageName": "File",
"visible": true
},
Expand Down Expand Up @@ -2275,7 +2275,7 @@
"name": "Vacation",
"description": "",
"created_at": "2020-07-01T10:37:42.978Z",
"updated_at": "2021-01-22T10:18:45.549Z",
"updated_at": "2021-02-01T15:10:58.420Z",
"pageName": "Jobs",
"visible": true
},
Expand Down
56 changes: 56 additions & 0 deletions @navikt/ds-icons/figma-api/pngConverter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const fs = require("fs");
const sharp = require("sharp");
const rimraf = require("rimraf");
const zipdir = require("zip-dir");
const pLimit = require("p-limit");

const zipPng = async () => {
await zipdir(
"./png/",
{ saveTo: "NAV-ikonpakke-png.zip" },
function (err, buffer) {
if (err) {
console.error(err);
}
}
);
};

const convertToPng = async () => {
const inputDir = "./svg/";
const outDir = "./png/";
const sizes = [16, 24, 128, 256];
console.log("Converting icons to .png format");

const limit = pLimit(20);

if (fs.existsSync(outDir)) {
rimraf.sync(outDir);
}
fs.mkdirSync(outDir);
sizes.forEach((size) => fs.mkdirSync(outDir + size.toString()));

await Promise.all(
fs.readdirSync(inputDir).map((file) => {
return limit(() =>
sizes.forEach((size) => {
const density = (72 * size) / 16;
sharp(inputDir + file, { density })
.resize(size)
.png()
.toFile(outDir + size.toString() + "/" + file.replace("svg", "png"))
.catch((e) => console.error(e));
})
);
})
);

await zipPng();
console.log("Finished converting icons to .png format");
};

try {
convertToPng();
} catch (e) {
console.error(e);
}
8 changes: 6 additions & 2 deletions @navikt/ds-icons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
"scripts": {
"dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
"create-icons": "svgr --template template/reactTemplate.js -d src svg --typescript --ref",
"build": "rm -rf src && rm -rf lib && npm run create-icons && tsc"
"convert-icons": "node figma-api/pngConverter.js",
"clean": "rm -rf src && rm -rf lib && rm -rf png && rm NAV-ikonpakke-png.zip",
"build": "npm run clean && npm run create-icons && tsc && npm run convert-icons"
},
"repository": {
"type": "git",
Expand All @@ -35,7 +37,9 @@
"lodash.kebabcase": "^4.1.1",
"lodash.startcase": "4.4.0",
"react": "^16.8.0 || ^17.0.0",
"rimraf": "3.0.2"
"rimraf": "3.0.2",
"sharp": "0.27.1",
"zip-dir": "^2.0.0"
},
"sideEffects": false
}
9 changes: 5 additions & 4 deletions @navikt/ds-icons/svg/DataFilled.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions @navikt/ds-icons/svg/GuideDogFilled.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ Vi tar nå i bruk storybook [https://storybook.js.org/](https://storybook.js.org
**NB!!** Det er aldri behov for å kjøre `npm install` i noen annen mappe enn rot-mappen.
Om en modul du lager har behov for en npm-pakke så kan du legge den til i devDep/dep i pakken for så å kjøre `yarn install` i root. Yarn workspaces fikser da dependency treet selv.


## Dokumentasjon

Dokumentasjon kan skrives ved å legge til mdx filer under `website/src/pages`. Nye komponenter under `@navikt/` dokumenteres ved å skrive mdx filer under `website/src/pages/beta/components`. Eldre komponenter dokumenteres ved å endre mdx filer under `md`-mappen lokalt i pakken under `packages`.
Expand Down Expand Up @@ -55,6 +54,7 @@ For å sikre kodekvalitet er det satt opp både `prettier` som kjører for hver
## Ikoner

> Krever at man har lagt til en .env fil under `@navikt/ds-icons/figma-api` med en Figma auth-token i format FIGMA_TOKEN="[TOKEN]"
- `yarn lerna:icons` - Oppdaterer ikonpakken med de nyeste ikonene fra Figma-biblioteket

## Byggemiljø
Expand Down
2 changes: 1 addition & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"build:gatsby": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"start": "npx copyfiles -E -f ../@navikt/ds-icons/*.zip ./static && npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
Expand Down

0 comments on commit 06807c7

Please sign in to comment.