diff --git a/tgui/packages/tgfont/README_ICON_TUTORIAL.md b/tgui/packages/tgfont/README_ICON_TUTORIAL.md new file mode 100644 index 0000000000..70b52e5a18 --- /dev/null +++ b/tgui/packages/tgfont/README_ICON_TUTORIAL.md @@ -0,0 +1,13 @@ +The following is the process to implement your own icon using an svg. + +If you plan on making your own SVG, consider [Inkscape](https://inkscape.org/). It is free and pretty powerful for vector graphics. + +1. Get whatever SVG you plan on using and put it in the `tgstation\tgui\packages\tgfont\icons` folder. + +2. In VS Code, press Ctrl+Shift+B, and select "tgui: rebuild tgfont". Wait for it to comlpete. + +Now your SVG will be able to be used in the game. + +When you reference your icon that you prefix it with "tg-", otherwise it will not find it. For example, with an SVG named "prosthetic-leg.svg", you would reference it with `icon_state = "tg-prosthetic-leg"`. + +Keep your SVG as simple as possible, the engine has trouble rendering SVGs that have a lot of little disconnected parts. diff --git a/tgui/packages/tgfont/config.cjs b/tgui/packages/tgfont/config.cjs deleted file mode 100644 index 4f6b58f106..0000000000 --- a/tgui/packages/tgfont/config.cjs +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @file - * @copyright 2021 AnturK https://github.com/AnturK - * @license MIT - */ - -module.exports = { - name: 'tgfont', - inputDir: './icons', - outputDir: './dist', - fontTypes: ['woff2', 'eot'], - assetTypes: ['css'], - prefix: 'tg', -}; diff --git a/tgui/packages/tgfont/icons/ATTRIBUTIONS.md b/tgui/packages/tgfont/icons/ATTRIBUTIONS.md new file mode 100644 index 0000000000..2f218388d3 --- /dev/null +++ b/tgui/packages/tgfont/icons/ATTRIBUTIONS.md @@ -0,0 +1,6 @@ +bad-touch.svg contains: +- hug by Phạm Thanh Lộc from the Noun Project +- Fight by Rudez Studio from the Noun Project + +prosthetic-leg.svg contains: +- prosthetic leg by Gan Khoon Lay from the Noun Project diff --git a/tgui/packages/tgfont/icons/air-tank-slash.svg b/tgui/packages/tgfont/icons/air-tank-slash.svg index 80f143cf24..8c33265f33 100644 --- a/tgui/packages/tgfont/icons/air-tank-slash.svg +++ b/tgui/packages/tgfont/icons/air-tank-slash.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/air-tank.svg b/tgui/packages/tgfont/icons/air-tank.svg index 7d1e077471..b55f4e7b3a 100644 --- a/tgui/packages/tgfont/icons/air-tank.svg +++ b/tgui/packages/tgfont/icons/air-tank.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/bad-touch.svg b/tgui/packages/tgfont/icons/bad-touch.svg new file mode 100644 index 0000000000..870060535a --- /dev/null +++ b/tgui/packages/tgfont/icons/bad-touch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/image-minus.svg b/tgui/packages/tgfont/icons/image-minus.svg index 8c3231917f..6fb74bd54f 100644 --- a/tgui/packages/tgfont/icons/image-minus.svg +++ b/tgui/packages/tgfont/icons/image-minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/image-plus.svg b/tgui/packages/tgfont/icons/image-plus.svg index 1658509429..e8b9bec62e 100644 --- a/tgui/packages/tgfont/icons/image-plus.svg +++ b/tgui/packages/tgfont/icons/image-plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/nanotrasen-logo.svg b/tgui/packages/tgfont/icons/nanotrasen-logo.svg index b74a415d4d..7cdc98573f 100644 --- a/tgui/packages/tgfont/icons/nanotrasen-logo.svg +++ b/tgui/packages/tgfont/icons/nanotrasen-logo.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/non-binary.svg b/tgui/packages/tgfont/icons/non-binary.svg new file mode 100644 index 0000000000..3b2a55b228 --- /dev/null +++ b/tgui/packages/tgfont/icons/non-binary.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/prosthetic-leg.svg b/tgui/packages/tgfont/icons/prosthetic-leg.svg new file mode 100644 index 0000000000..56384a84af --- /dev/null +++ b/tgui/packages/tgfont/icons/prosthetic-leg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/sound-minus.svg b/tgui/packages/tgfont/icons/sound-minus.svg index df51179d4b..1da5d4fa5b 100644 --- a/tgui/packages/tgfont/icons/sound-minus.svg +++ b/tgui/packages/tgfont/icons/sound-minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/sound-plus.svg b/tgui/packages/tgfont/icons/sound-plus.svg index c5f40d53b5..33be2c9176 100644 --- a/tgui/packages/tgfont/icons/sound-plus.svg +++ b/tgui/packages/tgfont/icons/sound-plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/tgui/packages/tgfont/icons/syndicate-logo.svg b/tgui/packages/tgfont/icons/syndicate-logo.svg index eda92f9b30..3ab1d6a639 100644 --- a/tgui/packages/tgfont/icons/syndicate-logo.svg +++ b/tgui/packages/tgfont/icons/syndicate-logo.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/tgui/packages/tgfont/mkdist.cjs b/tgui/packages/tgfont/mkdist.cjs deleted file mode 100644 index 5c628becf9..0000000000 --- a/tgui/packages/tgfont/mkdist.cjs +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @file - * @copyright 2021 AnturK https://github.com/AnturK - * @license MIT - */ - -// Change working directory to project root -process.chdir(__dirname); - -// Silently make a dist folder -try { - require('fs').mkdirSync('dist'); -} -catch (err) {} diff --git a/tgui/packages/tgfont/package.json b/tgui/packages/tgfont/package.json index 3d17149cd5..e98f7aa5b4 100644 --- a/tgui/packages/tgfont/package.json +++ b/tgui/packages/tgfont/package.json @@ -1,11 +1,13 @@ { - "private": true, - "name": "tgfont", - "version": "1.0.0", - "dependencies": { - "fantasticon": "1.2.3" - }, - "scripts": { - "tgfont:build": "node mkdist.cjs && fantasticon --config config.cjs" - } + "private": true, + "name": "tgfont", + "type": "module", + "version": "2.0.0", + "scripts": { + "tgfont:build": "svgo icons && node svgtofont.mjs" + }, + "dependencies": { + "svgo": "^3.3.2", + "svgtofont": "^6.3.2" + } } diff --git a/tgui/packages/tgfont/static/tgfont.css b/tgui/packages/tgfont/static/tgfont.css new file mode 100644 index 0000000000..6aed5892e4 --- /dev/null +++ b/tgui/packages/tgfont/static/tgfont.css @@ -0,0 +1,39 @@ +@font-face { + font-family: "tgfont"; + src: url('tgfont.woff2?t=1748786658304') format('woff2'); +} + +[class^="tg-"], [class*=" tg-"] { + font-family: 'tgfont' !important;font-size: undefined; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + +:root { +--tg-air-tank-slash: "\ea01"; +--tg-air-tank: "\ea02"; +--tg-bad-touch: "\ea03"; +--tg-image-minus: "\ea04"; +--tg-image-plus: "\ea05"; +--tg-nanotrasen-logo: "\ea06"; +--tg-non-binary: "\ea07"; +--tg-prosthetic-leg: "\ea08"; +--tg-sound-minus: "\ea09"; +--tg-sound-plus: "\ea0a"; +--tg-syndicate-logo: "\ea0b"; +} +.tg-air-tank-slash::before { content: var(--tg-air-tank-slash); } +.tg-air-tank::before { content: var(--tg-air-tank); } +.tg-bad-touch::before { content: var(--tg-bad-touch); } +.tg-image-minus::before { content: var(--tg-image-minus); } +.tg-image-plus::before { content: var(--tg-image-plus); } +.tg-nanotrasen-logo::before { content: var(--tg-nanotrasen-logo); } +.tg-non-binary::before { content: var(--tg-non-binary); } +.tg-prosthetic-leg::before { content: var(--tg-prosthetic-leg); } +.tg-sound-minus::before { content: var(--tg-sound-minus); } +.tg-sound-plus::before { content: var(--tg-sound-plus); } +.tg-syndicate-logo::before { content: var(--tg-syndicate-logo); } + + diff --git a/tgui/packages/tgfont/static/tgfont.woff2 b/tgui/packages/tgfont/static/tgfont.woff2 new file mode 100644 index 0000000000..8614e8d454 Binary files /dev/null and b/tgui/packages/tgfont/static/tgfont.woff2 differ diff --git a/tgui/packages/tgfont/svgtofont.mjs b/tgui/packages/tgfont/svgtofont.mjs new file mode 100644 index 0000000000..6f5c5a3fb2 --- /dev/null +++ b/tgui/packages/tgfont/svgtofont.mjs @@ -0,0 +1,20 @@ +import svgtofont from 'svgtofont'; + +/** @type {import('svgtofont').SvgToFontOptions} */ +const config = { + classNamePrefix: 'tg', + css: { + include: /\.css$/, + }, + dist: './dist', + emptyDist: true, + excludeFormat: ['eot', 'svg', 'symbol.svg', 'ttf', 'woff'], + fontName: 'tgfont', + src: './icons', + svgicons2svgfont: { + normalize: true, + }, + useCSSVars: true, +}; + +svgtofont(config).catch(console.error);