mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-18 20:31:31 +02:00
Code Issues Releases Wiki Activity

New Feature: webpage now displays <img> of SVG (#834)

Browse Source 
* Webpage now displays <img> of SVG

* Update docs/index.html

Co-authored-by: David Leal <halfpacho@gmail.com>

* Add a hint to change width/height for svg/img

Co-authored-by: David Leal <halfpacho@gmail.com>
This commit is contained in:
Thomas Bui
2021-09-06 19:07:46 -07:00
committed by GitHub
parent b6adba39e8
commit 63b340cb29
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/assets/js/script.js
View File

@@ -88,6 +88,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
$scope.selectedFontIcon = $scope.icons[0].font[0]; $scope.selectedFontIcon = $scope.icons[0].font[0];
$scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0); $scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0);
$scope.selectedFontIndex = 0; $scope.selectedFontIndex = 0;
$scope.selectedSvgIndex = 0;
/*------ End of "Re-format devicon.json" ------*/ /*------ End of "Re-format devicon.json" ------*/
}); });
@@ -101,6 +102,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
$scope.selectedFontIcon = icon.font[0]; $scope.selectedFontIcon = icon.font[0];
$scope.selectedFontIndex = 0; $scope.selectedFontIndex = 0;
$scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0); $scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0);
$scope.selectedSvgIndex = 0;
// reset color // reset color
$scope.fontBackground = DEFAULT_BACKGROUND; $scope.fontBackground = DEFAULT_BACKGROUND;
@@ -154,6 +156,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
} }
}); });
} }
/*---- End of "Change selected svg icon" ----*/ /*---- End of "Change selected svg icon" ----*/
}); });

21
docs/index.html
View File

@@ -66,13 +66,16 @@
</li> </li>
</div> </div>
</ul> </ul>
<p>Place this in your header</p>
<div class="cde">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;
</div>
<p>Use this in your body</p>
<div class="cde"> <div class="cde">
<div class="cde-com">&lt;!-- in your header --&gt;</div>
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;<br />
<br />
<div class="cde-com">&lt;!-- in your body --&gt;</div>
&lt;i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}}<span ng-if="colored"> colored</span>"&gt;&lt;/i&gt;<br /> &lt;i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}}<span ng-if="colored"> colored</span>"&gt;&lt;/i&gt;<br />
</div> </div>
<p><i>*To change the size, change the <code>i</code>'s <code>font-size</code></i></p>
</li> </li>
<li> <li>
<h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4> <h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4>
@@ -81,11 +84,21 @@
<img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg"> <img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
</li> </li>
</ul> </ul>
<p>Using &lt;img&gt; element</p>
<div class="cde">
&lt;img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
</div>
<p><i>*To change the size, change the <code>img</code>'s <code>height</code> and <code>width</code></i></p>
<br />
<p>Using Pure SVG</p>
<div class="cde"> <div class="cde">
&lt;svg viewBox="0 0 128 128"&gt;<br /> &lt;svg viewBox="0 0 128 128"&gt;<br />
<div class="cde-ind">{{selectedSvgIcon}}</div> <div class="cde-ind">{{selectedSvgIcon}}</div>
&lt;/svg&gt; &lt;/svg&gt;
</div> </div>
<p><i>*To change the size, change the <code>svg</code>'s <code>height</code> and <code>width</code></i></p>
</li> </li>
</ul> </ul>