diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 925d8ed9..09ea6038 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -77,7 +77,7 @@ All icons in Simple Icons have been optimized with the [SVGO tool](https://githu
* Install SVGO
* With npm: `npm install -g svgo`
* With Homebrew: `brew install svgo`
- * Run the following command `svgo -precision=3 icon.svg icon.min.svg`
+ * Run the following command `svgo --precision=3 icon.svg icon.min.svg`
* Check if there is a loss of quality in the output, if so increase the precision.
* The [SVGOMG Online Tool](https://jakearchibald.github.io/svgomg/)
* Click "Open SVG" and select an SVG file.
diff --git a/_data/simple-icons.json b/_data/simple-icons.json
index 24dda25b..fd22aac3 100644
--- a/_data/simple-icons.json
+++ b/_data/simple-icons.json
@@ -400,6 +400,11 @@
"hex": "05CC47",
"source": "http://help.deviantart.com/21"
},
+ {
+ "title": "devRant",
+ "hex": "F99A66",
+ "source": "https://devrant.com"
+ },
{
"title": "dev.to",
"hex": "0A0A0A",
@@ -1180,6 +1185,11 @@
"hex": "314359",
"source": "https://www.mixcloud.com/branding"
},
+ {
+ "title": "Mixer",
+ "hex": "002050",
+ "source": "https://github.com/mixer/branding-kit/"
+ },
{
"title": "Monero",
"hex": "FF6600",
@@ -1545,6 +1555,11 @@
"hex": "5E9EE3",
"source": "https://riseup.net/en/about-us/images"
},
+ {
+ "title": "rollup.js",
+ "hex": "EC4A3F",
+ "source": "https://rollupjs.org/"
+ },
{
"title": "Roots",
"hex": "525DDC",
diff --git a/icons/devrant.svg b/icons/devrant.svg
new file mode 100644
index 00000000..0300f01e
--- /dev/null
+++ b/icons/devrant.svg
@@ -0,0 +1 @@
+
diff --git a/icons/mixer.svg b/icons/mixer.svg
new file mode 100644
index 00000000..3bf0cebd
--- /dev/null
+++ b/icons/mixer.svg
@@ -0,0 +1 @@
+
diff --git a/icons/rollup-dot-js.svg b/icons/rollup-dot-js.svg
new file mode 100644
index 00000000..a79c3d64
--- /dev/null
+++ b/icons/rollup-dot-js.svg
@@ -0,0 +1 @@
+
diff --git a/index.html b/index.html
index 8e9b4c6a..0099d379 100644
--- a/index.html
+++ b/index.html
@@ -207,6 +207,7 @@
+
-
diff --git a/package.json b/package.json
index 3dff4bb1..9990e53e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-icons",
- "version": "1.8.6",
+ "version": "1.8.7",
"description": "SVG icons for popular brands https://simpleicons.org",
"homepage": "https://www.simpleicons.org",
"keywords": [
diff --git a/site_script.js b/site_script.js
index 852df751..6c8742fa 100644
--- a/site_script.js
+++ b/site_script.js
@@ -1,12 +1,16 @@
(function(document) {
+ var $grid = document.querySelector('.grid'),
+ $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
+ $search = document.querySelector('.search'),
+ $searchClose = $search.querySelector('.search__close'),
+ $searchInput = $search.querySelector('input'),
+ $sortColor = document.getElementById('sort-color'),
+ $sortAlphabetically = document.getElementById('sort-alphabetically'),
+ $sortRelevance = document.getElementById('sort-relevance');
+
var queryParameter = 'q',
- $grid = document.querySelector('.grid'),
- $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
- $search = document.querySelector('.search'),
- $searchClose = $search.querySelector('.search__close'),
- $searchInput = $search.querySelector('input'),
- $sortColor = document.getElementById('sort-color'),
- $sortAlpha = document.getElementById('sort-alphabetically');
+ previousQuery = null,
+ previousOrder = $sortColor;
// Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons');
@@ -96,18 +100,51 @@
}).sort(function(a, b) {
return a.score - b.score;
}).forEach(function(item, index) {
- item.element.classList.remove('hidden');
-
- if (query !== '') {
- // Order according to relevance (i.e. score) if there is a query
- item.element.style.order = index;
- } else {
- // Use color-based order if there is no query
- item.element.style.removeProperty('order');
- }
+ var element = item.element;
+ element.setAttribute('data-relevance', index);
+ element.classList.remove('hidden');
});
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
+ if (query === '') {
+ if ($sortRelevance.classList.contains('active')) {
+ selectSortingOrder(previousOrder);
+ }
+
+ $sortRelevance.setAttribute('display', 'none');
+ previousQuery = null;
+ } else {
+ if (previousQuery === null) {
+ selectSortingOrder($sortRelevance);
+ }
+
+ previousQuery = query;
+ }
+ }
+ function sort() {
+ if ($sortColor.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = null; });
+ } else if ($sortAlphabetically.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
+ } else if ($sortRelevance.classList.contains('active')) {
+ $icons.forEach(icon => { icon.style.order = icon.getAttribute('data-relevance'); });
+ }
+ }
+ function selectSortingOrder(selected) {
+ selected.classList.add('active');
+
+ var options = [$sortColor, $sortAlphabetically, $sortRelevance];
+ for (var option of options.filter(option => option !== selected)) {
+ option.classList.remove('active');
+ }
+
+ if (selected !== $sortRelevance) {
+ previousOrder = selected;
+ } else {
+ $sortRelevance.removeAttribute('display');
+ }
+
+ sort();
}
document.addEventListener('DOMContentLoaded', function() {
@@ -142,15 +179,12 @@
}, false);
$sortColor.addEventListener('click', function() {
- $icons.forEach(icon => { icon.style.order = null; });
-
- $sortColor.classList.add('active');
- $sortAlpha.classList.remove('active');
+ selectSortingOrder($sortColor);
});
- $sortAlpha.addEventListener('click', function() {
- $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
-
- $sortAlpha.classList.add('active');
- $sortColor.classList.remove('active');
+ $sortAlphabetically.addEventListener('click', function() {
+ selectSortingOrder($sortAlphabetically);
+ });
+ $sortRelevance.addEventListener('click', function() {
+ selectSortingOrder($sortRelevance);
});
})( document );
diff --git a/stylesheet.css b/stylesheet.css
index d97e8971..522420b1 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -202,6 +202,10 @@ a.share-button {
opacity: 1;
}
+#sort-relevance:hover path:not(:nth-of-type(1)) {
+ fill: #fbc02d;
+}
+
.grid {
display: flex;
flex-wrap: wrap;