init v2.0 of tabler icons

16 files changed, 402 insertions, 108 deletions

diff --git a/.gitignore b/.gitignore
index e190e1c8..1c128880 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,7 @@ node_modules/
 .jekyll-cache/
 package-lock.json
 Gemfile.lock
-packages/*
+packages-zip/*
 .DS_Store
 icons-outlined/
 github
diff --git a/gulpfile.js b/gulpfile.js
index a36fb97b..65a847a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -13,8 +13,6 @@ const gulp = require('gulp'),
 	sass = require('node-sass'),
 	cleanCSS = require('clean-css'),
 	argv = require('minimist')(process.argv.slice(2)),
-	svgParse = require('parse-svg-path'),
-	svgpath = require('svgpath'),
 	svgr = require('@svgr/core').default
 
 const compileOptions = {
@@ -382,7 +380,7 @@ gulp.task('build-zip', function () {
 
 	return gulp.src('{icons/**/*,icons-png/**/*,icons-react/**/*,iconfont/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}')
 		.pipe(zip(`tabler-icons-${version}.zip`))
-		.pipe(gulp.dest('packages'))
+		.pipe(gulp.dest('packages-zip'))
 })
 
 gulp.task('build-jekyll', function (cb) {
@@ -478,67 +476,7 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
 }))
 
 gulp.task('optimize', function (cb) {
-	const addFloats = function (n1, n2) {
-		return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000
-	}
-
-	const optimizePath = function (path) {
-		let transformed = svgpath(path)
-			.rel()
-			.round(3)
-			.toString()
-
-		return svgParse(transformed).map(function (a) {
-			return a.join(' ')
-		}).join(' ')
-	}
-
-	glob("src/_icons/*.svg", {}, function (er, files) {
 
-		files.forEach(function (file, i) {
-			let svgFile = fs.readFileSync(file),
-				svgFileContent = svgFile.toString()
-
-			svgFileContent = svgFileContent
-				.replace(/><\/(polyline|line|rect|circle|path)>/g, '/>')
-				.replace(/rx="([^"]+)"\s+ry="\1"/g, 'rx="$1"')
-				.replace(/\s?\/>/g, ' />')
-				.replace(/\n\s*<(line|circle|path|polyline|rect)/g, "\n  <$1")
-				.replace(/polyline points="([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s([0-9.]+)"/g, 'line x1="$1" y1="$2" x2="$3" y2="$4"')
-				.replace(/<path d="([^"]+)"/g, function (f, r1) {
-					r1 = optimizePath(r1)
-
-					return `<path d="${r1}"`
-				})
-				.replace(/d="m/g, 'd="M')
-				.replace(/([Aa])\s?([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s?([0-1])\s?([0-1])\s?(-?[0-9.]+)\s?(-?[0-9.]+)/gi, '$1$2 $3 $4 $5 $6 $7 $8')
-				.replace(/\n\n+/g, "\n")
-
-				.replace(/<path d="M([0-9.]*) ([0-9.]*)l\s?([-0-9.]*) ([-0-9.]*)"/g, function (f, r1, r2, r3, r4) {
-					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`
-				})
-				.replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([-0-9.]*)"/g, function (f, r1, r2, r3) {
-					return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"`
-				})
-				.replace(/<path d="M([0-9.]*) ([0-9.]*)h\s?([-0-9.]*)"/g, function (f, r1, r2, r3) {
-					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"`
-				})
-				.replace(/<path d="([^"]+)"/g, function (f, r1) {
-					r1 = r1
-						.replace(/ -0\./g, " -.")
-						.replace(/ 0\./g, " .")
-						.replace(/\s([a-z])/gi, "$1")
-						.replace(/([a-z])\s/gi, "$1")
-					return `<path d="${r1}"`
-				})
-
-			if (svgFile.toString() !== svgFileContent) {
-				fs.writeFileSync(file, svgFileContent)
-			}
-		})
-
-		cb()
-	})
 })
 
 gulp.task('changelog-commit', function (cb) {
@@ -693,48 +631,9 @@ gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) {
 	cb()
 }))
 
-const setVersions = function (version, files) {
-	for (const i in files) {
-		const file = files[i]
-
-		if (fs.existsSync(`src/_icons/${file}.svg`)) {
-			let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString()
-
-			if (!svgFile.match(/version: ([0-9.]+)/i)) {
-				svgFile = svgFile.replace(/---\n<svg>/i, function (m) {
-					return `version: "${version}"\n${m}`
-				})
-
-				fs.writeFileSync(`src/_icons/${file}.svg`, svgFile)
-			} else {
-				console.log(`File ${file} already has version`)
-			}
-
-		} else {
-			console.log(`File ${file} doesn't exists`)
-		}
-	}
-}
 
 gulp.task('update-icons-version', function (cb) {
 
-	const version = argv['latest-version'] || `${p.version}`,
-		newVersion = argv['new-version'] || `${p.version}`
-
-	if (version) {
-		cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function (err, ret) {
-
-			let newIcons = []
-
-			ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-				newIcons.push(fileName)
-			})
-
-			if (newIcons.length) {
-				setVersions(newVersion.replace(/\.0$/, ''), newIcons)
-			}
-		})
-	}
 
 	cb()
 })
diff --git a/package.json b/package.json
index 4aecf70f..9b2e2fa4 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,12 @@
 {
-  "name": "@tabler/icons",
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+    ]
+  },
   "version": "1.63.0",
   "description": "A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.",
   "repository": {
@@ -40,13 +47,29 @@
     "access": "public"
   },
   "scripts": {
+    "build": "yarn optimize && yarn update-version && yarn build-svg && yarn icons-react build",
+    "build-svg": "rm -rf dist && bundle exec jekyll build && mkdir dist && cp -R _site/{icons,tags.json} dist/ && rm -rf _site",
+    "optimize": "babel-node ./scripts/optimize.js --presets @babel/env",
+    "update-version": "babel-node ./scripts/updateVersion.js --presets @babel/env",
+    "update-unicode": "babel-node ./scripts/updateUnicode.js --presets @babel/env",
+
     "start": "bundle exec jekyll serve --watch --livereload --trace --livereload_port 8888",
+
+    "icons": "yarn workspace @tabler/icons",
+    "icons-angular": "yarn workspace @tabler/icons-angular",
+    "icons-iconfont": "yarn workspace @tabler/icons-iconfont",
+    "icons-preact": "yarn workspace @tabler/icons-preact",
+    "icons-react": "yarn workspace @tabler/icons-react",
+    "icons-svelte": "yarn workspace @tabler/icons-svelte",
+    "icons-vue-2": "yarn workspace @tabler/icons-vue-2",
+    "icons-vue-3": "yarn workspace @tabler/icons-vue-3",
+
     "prebuild-react": "rm -rf ./icons-react/dist/",
     "build-react": "rollup -c",
-    "optimize": "gulp optimize",
     "release": "release-it",
-    "build": "gulp build",
-    "build-iconfont": "gulp build-iconfont",
+    "_optimize": "gulp optimize",
+    "_build": "gulp build",
+    "_build-iconfont": "gulp build-iconfont",
     "import": "./_import.sh && gulp optimize"
   },
   "keywords": [
@@ -63,6 +86,7 @@
     "@babel/parser": "7.11.5",
     "@babel/preset-env": "7.11.5",
     "@babel/preset-react": "7.10.4",
+    "@babel/node": "^7.13.10",
     "@rollup/plugin-babel": "5.2.1",
     "@rollup/plugin-commonjs": "15.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
diff --git a/packages/icons-angular/package.json b/packages/icons-angular/package.json
new file mode 100644
index 00000000..43b8a837
--- /dev/null
+++ b/packages/icons-angular/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-angular",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-angular"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons-iconfont/package.json b/packages/icons-iconfont/package.json
new file mode 100644
index 00000000..4aee60fb
--- /dev/null
+++ b/packages/icons-iconfont/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-iconfont",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-iconfont"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons-preact/package.json b/packages/icons-preact/package.json
new file mode 100644
index 00000000..850251a6
--- /dev/null
+++ b/packages/icons-preact/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-preact",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-preact"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
new file mode 100644
index 00000000..58321f8c
--- /dev/null
+++ b/packages/icons-react/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@tabler/icons-react",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-react"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn clean && yarn build:icons",
+    "build:icons": "echo 'Build icons React'",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.js"
+  }
+}
diff --git a/packages/icons-svetle/package.json b/packages/icons-svetle/package.json
new file mode 100644
index 00000000..bd042314
--- /dev/null
+++ b/packages/icons-svetle/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-svetle",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-svetle"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons-vue-2/package.json b/packages/icons-vue-2/package.json
new file mode 100644
index 00000000..162e4034
--- /dev/null
+++ b/packages/icons-vue-2/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-vue-2",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-vue-2"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons-vue-3/package.json b/packages/icons-vue-3/package.json
new file mode 100644
index 00000000..1daa9f2e
--- /dev/null
+++ b/packages/icons-vue-3/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons-vue-3",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons-vue-3"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 00000000..416f0cfa
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tabler/icons",
+  "version": "2.0.0",
+  "author": "codecalm",
+  "license": "MIT",
+  "homepage": "https://tabler-icons.io",
+  "bugs": {
+    "url": "https://github.com/tabler/tabler-icons/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tabler/tabler-icons.git",
+    "directory": "packages/icons"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  }
+}
diff --git a/scripts/optimize.js b/scripts/optimize.js
new file mode 100644
index 00000000..d440d401
--- /dev/null
+++ b/scripts/optimize.js
@@ -0,0 +1,64 @@
+import svgpath from 'svgpath'
+import svgParse from 'parse-svg-path'
+import glob from 'glob'
+import fs from 'fs'
+import { basename } from 'path'
+
+const addFloats = (n1, n2) => {
+  return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000
+}
+
+const optimizePath = (path) => {
+  let transformed = svgpath(path)
+  .rel()
+  .round(3)
+  .toString()
+
+  return svgParse(transformed).map(function (a) {
+    return a.join(' ')
+  }).join(' ')
+}
+
+const optimizeIcons = (path) => {
+  glob(path, {}, function(er, files) {
+
+    files.forEach(function(file) {
+      let svgFile = fs.readFileSync(file),
+          svgFileContent = svgFile.toString()
+
+      svgFileContent = svgFileContent.replace(/><\/(polyline|line|rect|circle|path)>/g, '/>').
+          replace(/rx="([^"]+)"\s+ry="\1"/g, 'rx="$1"').
+          replace(/\s?\/>/g, ' />').
+          replace(/\n\s*<(line|circle|path|polyline|rect)/g, "\n  <$1").
+          replace(/polyline points="([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s([0-9.]+)"/g, 'line x1="$1" y1="$2" x2="$3" y2="$4"').
+          replace(/<path d="([^"]+)"/g, function(f, r1) {
+            r1 = optimizePath(r1)
+
+            return `<path d="${r1}"`
+          }).
+          replace(/d="m/g, 'd="M').
+          replace(/([Aa])\s?([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s?([0-1])\s?([0-1])\s?(-?[0-9.]+)\s?(-?[0-9.]+)/gi, '$1$2 $3 $4 $5 $6 $7 $8').
+          replace(/\n\n+/g, "\n").
+          replace(/<path d="M([0-9.]*) ([0-9.]*)l\s?([-0-9.]*) ([-0-9.]*)"/g, function(f, r1, r2, r3, r4) {
+            return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`
+          }).
+          replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([-0-9.]*)"/g, function(f, r1, r2, r3) {
+            return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"`
+          }).
+          replace(/<path d="M([0-9.]*) ([0-9.]*)h\s?([-0-9.]*)"/g, function(f, r1, r2, r3) {
+            return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"`
+          }).
+          replace(/<path d="([^"]+)"/g, function(f, r1) {
+            r1 = r1.replace(/ -0\./g, " -.").replace(/ 0\./g, " .").replace(/\s([a-z])/gi, "$1").replace(/([a-z])\s/gi, "$1")
+            return `<path d="${r1}"`
+          })
+
+      if (svgFile.toString() !== svgFileContent) {
+        console.log(`Optimize icon "${basename(file)}"`);
+        fs.writeFileSync(file, svgFileContent)
+      }
+    })
+  })
+}
+
+optimizeIcons("src/_icons/*.svg")
diff --git a/scripts/updateUnicode.js b/scripts/updateUnicode.js
new file mode 100644
index 00000000..85332d90
--- /dev/null
+++ b/scripts/updateUnicode.js
@@ -0,0 +1,72 @@
+import cp from 'child_process'
+import fs from 'fs'
+import glob from 'glob'
+
+let maxUnicode = 0
+
+const setMaxUnicode = () => {
+  const path = 'src/_icons/*.svg'
+
+  const files = glob.sync(path)
+
+  files.forEach(function(file) {
+    const svgFile = fs.readFileSync(file).toString()
+
+    svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) {
+      const newUnicode = parseInt(unicode, 16)
+
+      if(newUnicode) {
+        maxUnicode = Math.max(maxUnicode, newUnicode)
+      }
+    })
+  })
+}
+
+const addUnicodeToIcons = (files) => {
+
+  for (const i in files) {
+    const file = files[i]
+
+    if (fs.existsSync(`src/_icons/${file}.svg`)) {
+      let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString()
+
+      if (!svgFile.match(/unicode: ([a-f0-9.]+)/i)) {
+        maxUnicode++
+        const unicode = maxUnicode.toString(16)
+
+        if(unicode) {
+          svgFile = svgFile.replace(/---\n<svg>/i, function(m) {
+            return `unicode: "${unicode}"\n${m}`
+          })
+
+          console.log(`Add unicode "${unicode}" to "${file}"`);
+          fs.writeFileSync(`src/_icons/${file}.svg`, svgFile)
+        }
+      } else {
+        console.log(`File ${file} already has unicode`)
+      }
+    } else {
+      console.log(`File ${file} doesn't exists`)
+    }
+  }
+}
+
+const updateIconsUnicode = () => {
+  setMaxUnicode()
+
+  cp.exec(`grep -RiL "unicode: " ./src/_icons/*.svg`, function(err, ret) {
+
+    let newIcons = []
+
+    ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) {
+      newIcons.push(fileName)
+    })
+
+    if (newIcons.length) {
+      console.log('newIcons', newIcons);
+      addUnicodeToIcons(newIcons)
+    }
+  })
+}
+
+updateIconsUnicode()
diff --git a/scripts/updateVersion.js b/scripts/updateVersion.js
new file mode 100644
index 00000000..218ffa9a
--- /dev/null
+++ b/scripts/updateVersion.js
@@ -0,0 +1,47 @@
+import p from '../package.json'
+import cp from 'child_process'
+import fs from 'fs'
+import { basename } from 'path'
+
+const setVersionToIcons = (version, files) => {
+  for (const i in files) {
+    const file = files[i]
+
+    if (fs.existsSync(`src/_icons/${file}.svg`)) {
+      let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString()
+
+      if (!svgFile.match(/version: ([0-9.]+)/i)) {
+        svgFile = svgFile.replace(/---\n<svg>/i, function(m) {
+          return `version: "${version}"\n${m}`
+        })
+
+        console.log(`Set version to ${version} in "${basename(file)}"`);
+        fs.writeFileSync(`src/_icons/${file}.svg`, svgFile)
+      } else {
+        console.log(`File ${file} already has version`)
+      }
+    } else {
+      console.log(`File ${file} doesn't exists`)
+    }
+  }
+}
+
+const updateIconsVersion = (version) => {
+
+  if (version) {
+    cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function(err, ret) {
+
+      let newIcons = []
+
+      ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) {
+        newIcons.push(fileName)
+      })
+
+      if (newIcons.length) {
+        setVersionToIcons(version.replace(/\.0$/, ''), newIcons)
+      }
+    })
+  }
+}
+
+updateIconsVersion(p.version)
diff --git a/src/_tags.html b/src/tags.html
index fbd5b54d..aa71db32 100644
--- a/src/_tags.html
+++ b/src/tags.html
@@ -13,6 +13,7 @@ layout: default
 				<td>{{ icon.tags | join: ', ' }}</td>
 				<td>{{ icon.category }}</td>
 				<td>{{ icon.version }}</td>
+				<td>{{ icon.unicode }}</td>
 			</tr>
 			{% if icon.tags.size == 0 %}
 			{% assign i = i | plus: 1 %}
diff --git a/src/tags.json b/src/tags.json
index cab4e929..3b2d3fef 100644
--- a/src/tags.json
+++ b/src/tags.json
@@ -4,6 +4,7 @@
 {% assign slug-tags = icon.slug | split: '-' %}{% assign tags = slug-tags | concat: icon.tags %}  "{{ icon.slug }}": {
     "category": "{{ icon.category }}",
     "tags": [{% for tag in tags %}"{{ tag }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
-    "version": "{{ icon.version }}"
+    "version": "{{ icon.version }}",
+    "unicode": "{{ icon.unicode }}"
   }{% unless forloop.last %}, {% endunless %}{% endfor %}
 }