From acacf1c4d3231f95b10727cbfd645100a90d7be3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Tue, 20 Feb 2024 10:00:34 +0200 Subject: [PATCH] UHF-9497: Removed custom icons for hdbt subtheme as all usable icons should be available in hdbt theme. --- public/themes/custom/hdbt_subtheme/README.md | 20 -- .../hdbt_subtheme/templates/misc/icon.twig | 1 - .../custom/hdbt_subtheme/webpack.config.js | 7 - .../hdbt_subtheme/webpack.svgToSprite.js | 181 ------------------ 4 files changed, 209 deletions(-) delete mode 100644 public/themes/custom/hdbt_subtheme/templates/misc/icon.twig delete mode 100644 public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js diff --git a/public/themes/custom/hdbt_subtheme/README.md b/public/themes/custom/hdbt_subtheme/README.md index 1b81adab..2f1eda60 100644 --- a/public/themes/custom/hdbt_subtheme/README.md +++ b/public/themes/custom/hdbt_subtheme/README.md @@ -70,35 +70,15 @@ hdbt_subtheme │ │ └───... │ └───js │ │ │ common.js -│ └───icons -│ | some-icon.svg └───dist └───css | styles.min.css └───js | bundle.min.js - └───icons - | sprite.svg ``` ## How tos -### How can I add a new SVG icon and then use it on my site. - -You can add your custom icons to `./src/icons/`. F.e. `my-awesome-icon.svg`. -Running `nvm use && npm i && npm run build` will collect the icon to the sprite.svg and it should then be available for use on your site by calling `my-awesome-icon`. Just remember to clear caches. -The icons can be used in twig like so: - - {# HDBT Subtheme specific icons #} - {% include "@hdbt_subtheme/misc/icon.twig" with {icon: 'my-awesome-icon'} %} - - {# HDBT specific icons #} - {% include "@hdbt/misc/icon.twig" with {icon: 'google-view'} %} - -To use the icon in SCSS, you can call it like so: - - background-image: url('../icons/my-awesome-icon.svg'); - ### My javascript has unexpected errors when loading a page in Drupal. If you have compiled the code with dev-flag (`nmp run dev`), then the sourcemaps expects the JS files to be found in correct places. diff --git a/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig b/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig deleted file mode 100644 index 8e2c5124..00000000 --- a/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/themes/custom/hdbt_subtheme/webpack.config.js b/public/themes/custom/hdbt_subtheme/webpack.config.js index ab9055da..75b8e803 100644 --- a/public/themes/custom/hdbt_subtheme/webpack.config.js +++ b/public/themes/custom/hdbt_subtheme/webpack.config.js @@ -4,7 +4,6 @@ const glob = require('glob'); const FriendlyErrorsWebpackPlugin = require('@nuxt/friendly-errors-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); -const SvgToSprite = require('./webpack.svgToSprite'); const { merge } = require('webpack-merge'); // Handle entry points. @@ -105,12 +104,6 @@ module.exports = (env, argv) => { extensions: ['.js', '.json'], }, plugins: [ - // Uncomment following lines to create svg icon sprite. - // new SvgToSprite( - // path.resolve(__dirname, 'src/icons/**/*.svg'), - // 'icons/hdbt-subtheme-sprite.svg', - // 'icons.json' - // ), new FriendlyErrorsWebpackPlugin(), new RemoveEmptyScriptsPlugin(), new MiniCssExtractPlugin({ diff --git a/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js b/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js deleted file mode 100644 index cfb478ed..00000000 --- a/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js +++ /dev/null @@ -1,181 +0,0 @@ -const fs = require('fs'); -const md5 = require('md5'); -const path = require('path'); -const glob = require('glob'); -const SVGSpriter = require('svg-sprite'); - -// Generates styles for each icon. -class svgToSprite { - constructor(inputPattern, outputSvgSpriteFilename, outputIconJsonFilename) { - // Current theme name. - this.themeName = path.basename(path.resolve(process.cwd())).replace(/_/g, '-'); - - // Input and output patterns. - this.inputPattern = inputPattern; - this.svgSpriteFilename = outputSvgSpriteFilename; - this.svgToCssOutputFilename = `css/${this.themeName}-icons.css`; - this.svgToJsonOutputFilename = outputIconJsonFilename; - - // Mapped SVG files. - this.files = []; - this.cssVariables = []; - this.classes = []; - - // Sprite configurations. - this.spriteHashFilename = ''; - } - - apply(compiler) { - const pluginName = svgToSprite.name; - const { webpack } = compiler; - const { Compilation } = webpack; - const { RawSource } = webpack.sources; - - // Tapping to the "thisCompilation" hook in order to further tap - // to the compilation process on an earlier stage. - compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - - // Tapping to the assets processing pipeline on a specific stage. - compilation.hooks.processAssets.tap( - { - name: pluginName, - stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, - }, - () => { - if (this.files) { - // Create Spriter instance with custom configuration. - let spriter = new SVGSpriter({ - mode: { - stack: { - dest: "dist", - sprite: this.svgSpriteFilename, - rootviewbox: false, - } - } - }); - - // Add SVG files to Spriter instance. - this.files.forEach(function(pathname) { - spriter.add(pathname, null, fs.readFileSync(pathname, 'utf-8')); - }); - - // Compile the sprite. - spriter.compile((error, result) => { - for (let mode in result) { - for (let resource in result[mode]) { - let hash = md5(result[mode][resource].contents).slice(-5); - let outputFilename = this.svgSpriteFilename.replace(/.svg/g, `-${hash}.svg`); - - if (result[mode][resource].contents) { - this.spriteHashFilename = outputFilename; - - // Adding new asset to the compilation, so it will be - // automatically generated by the webpack - // in the output directory. - compilation.emitAsset( - outputFilename, - new RawSource(result[mode][resource].contents) - ); - } - } - } - }); - } - } - ); - }); - - // SVG to CSS. - // Create styles for the icons. - compiler.hooks.emit.tapAsync('svgToCss', (compilation, callback) => { - - // Create --hel-icon--{icon name} and [data-hds-icon-start:'{icon name}'] CSS variables. - let cssVariables = []; - - while(this.cssVariables.length) { - let fullFilename = this.cssVariables.shift(); - let filename = fullFilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - cssVariables.push(`--${this.themeName}-icon--${name[0]}:url(../${this.spriteHashFilename}#${name[0]})`); - } - cssVariables = `:root{${ cssVariables.join(';') }}`; - - // Create .hel-icon--{icon name} & [data-hds-icon-start:'{icon name}'] or {theme-name}--{icon name} css classes. - let cssClasses = ''; - while(this.classes.length) { - let fullFilename = this.classes.shift(); - let filename = fullFilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - cssClasses += `.${this.themeName}-icon--${name[0]},[data-hds-icon-start='${name[0]}']{--url:var(--${this.themeName}-icon--${name[0]})}`; - } - - // Add a URL as a CSS variable to the hel-icon mask-image. - // If icons are used elsewhere (f.e. in a separate theme or module) this - // variable will provide the correct URL for the icon. - let hdbtIconUrl = `.${this.themeName}-icon,[data-hds-icon-start]::before{` + - `-webkit-mask-image:var(--url);` + - `mask-image:var(--url)` + - `}`; - - // Combine CSS variables and classes. - let filelist = cssVariables + cssClasses + hdbtIconUrl; - - // Compile the assets. - compilation.assets[this.svgToCssOutputFilename] = { - source: function() { - return filelist; - }, - size: function() { - return filelist.length; - } - }; - callback(); - }); - compiler.hooks.environment.tap('svgToCss', this.checkForFiles.bind(this)); - compiler.hooks.watchRun.tap('svgToCss', this.checkForFiles.bind(this)); - - // SVG to JSON - // Create a list of icons in JSON format. - compiler.hooks.emit.tapAsync('svgToJson', (compilation, callback) => { - let filelist = '['; - const last = this.files[this.files.length - 1]; - - while(this.files.length) { - let fullfilename = this.files.shift(); - let filename = fullfilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - let divider = (fullfilename === last) ? '"' : '",'; - filelist += '"' + name[0] + divider; - } - filelist += ']'; - - compilation.assets[this.svgToJsonOutputFilename] = { - source: function() { - return filelist; - }, - size: function() { - return filelist.length; - } - }; - callback(); - }); - compiler.hooks.environment.tap('svgToJson', this.checkForFiles.bind(this)); - compiler.hooks.watchRun.tap('svgToJson', this.checkForFiles.bind(this)); - } - - // Map files to suitable variables. - checkForFiles() { - glob.globSync(this.inputPattern).map((match) => { - const pathname = path.resolve(match); - const stats = fs.lstatSync(pathname); - - if (stats.isFile()) { - this.classes = [...new Set([...this.classes, pathname])]; - this.cssVariables = [...new Set([...this.cssVariables, pathname])]; - this.files = [...new Set([...this.files, pathname])]; - } - }); - } -} - -module.exports = svgToSprite;