sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: remove external icon libraries

Browse Source
This commit is contained in:
woothu
2019-06-14 11:06:46 +02:00
parent 501ed1a956
commit 906345d15b
12 changed files with 245 additions and 4963 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+23 -29
View File
@@ -384,9 +384,6 @@
head-variant="light"
no-sorting
>
<!-- <div slot="activity-header">
A tu nic
</div> -->
<td slot="avatar" class="c-text-center" slot-scope="{item}">
<div class="c-avatar">
<img :src="item.avatar.url" class="c-img-avatar" alt="">
@@ -410,15 +407,13 @@
slot-scope="{item}"
class="c-text-center"
>
<i
class="c-h4 c-mb-0"
:class="flag(item.country.flag)"
:title="item.country.flag"
:id="item.country.flag"
></i>
<CIcon
:name="item.country.flag"
height="25"
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="clearfix">
<div class="c-clearfix">
<div class="c-float-left">
<strong>{{item.usage.value}}%</strong>
</div>
@@ -437,7 +432,10 @@
slot-scope="{item}"
class="c-text-center"
>
<i :class="item.payment.icon" style="font-size:24px"></i>
<CIcon
:name="item.payment.icon"
height="25"
/>
</td>
<td slot="activity" slot-scope="{item}">
<div class="c-small c-text-muted">Last login</div>
@@ -457,7 +455,6 @@ import WidgetsSocial from './widgets/WidgetsSocial'
import CalloutChartExample from './charts/CalloutChartExample'
import CChartLineSimple from './charts/CChartLineSimple'
export default {
name: 'Dashboard',
components: {
@@ -467,61 +464,61 @@ export default {
WidgetsSocial,
CChartLineSimple
},
data: function () {
data () {
return {
selected: 'Month',
tableItems: [
{
avatar: { url: 'img/avatars/1.jpg', status: 'success' },
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
country: { name: 'USA', flag: 'us' },
country: { name: 'USA', flag: 'US' },
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
payment: { name: 'Mastercard', icon: 'cc-mastercard' },
activity: '10 sec ago'
},
{
avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
country: { name: 'Brazil', flag: 'br' },
country: { name: 'Brazil', flag: 'BR' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
payment: { name: 'Visa', icon: 'cc-visa' },
activity: '5 minutes ago'
},
{
avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
country: { name: 'India', flag: 'in' },
country: { name: 'India', flag: 'IN' },
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
payment: { name: 'Stripe', icon: 'stripe' },
activity: '1 hour ago'
},
{
avatar: { url: 'img/avatars/4.jpg', status: '' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
country: { name: 'France', flag: 'fr' },
country: { name: 'France', flag: 'FR' },
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'PayPal', icon: 'fa fa-paypal' },
payment: { name: 'PayPal', icon: 'paypal' },
activity: 'Last month'
},
{
avatar: { url: 'img/avatars/5.jpg', status: 'success' },
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Spain', flag: 'es' },
country: { name: 'Spain', flag: 'ES' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
payment: { name: 'Google Wallet', icon: 'google-wallet' },
activity: 'Last week'
},
{
avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Poland', flag: 'pl' },
country: { name: 'Poland', flag: 'PL' },
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
payment: { name: 'Amex', icon: 'cc-amex' },
activity: 'Last week'
}
],
tableFields: [
{ key: 'avatar', _classes: 'c-text-center' },
{ key: 'avatar', label: '', _classes: 'c-text-center' },
{ key: 'user' },
{ key: 'country', _classes: 'c-text-center' },
{ key: 'usage' },
@@ -543,9 +540,6 @@ export default {
$variant = 'danger'
}
return $variant
},
flag (value) {
return 'flag-icon flag-icon-' + value
}
}
}
src/views/buttons/BrandButtons.vue
+140 -289
View File
@@ -8,154 +8,53 @@
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<code>
&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<!-- <template v-for="(brand, key) in $options.brands">
<button
type="button"
:class="`c-btn-${brand}`"
class="c-btn c-btn-sm c-btn-brand c-mr-1"
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<i :class="`fa fa-${brand}`"></i>
<span>{{brand}}</span>
</button>
</template> -->
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
<i class="fa fa-facebook"></i><span>Facebook</span>
</CButton>
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
<i class="fa fa-twitter"></i><span>Twitter</span>
</CButton>
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
<i class="fa fa-linkedin"></i><span>LinkedIn</span>
</CButton>
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
<i class="fa fa-flickr"></i><span>Flickr</span>
</CButton>
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
<i class="fa fa-tumblr"></i><span>Tumblr</span>
</CButton>
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
<i class="fa fa-xing"></i><span>Xing</span>
</CButton>
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
<i class="fa fa-github"></i><span>Github</span>
</CButton>
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
<i class="fa fa-html5"></i><span>HTML5</span>
</CButton>
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
<i class="fa fa-openid"></i><span>OpenID</span>
</CButton>
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
<i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
</CButton>
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
<i class="fa fa-css3"></i><span>CSS3</span>
</CButton>
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
<i class="fa fa-youtube"></i><span>YouTube</span>
</CButton>
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
<i class="fa fa-dribbble"></i><span>Dribbble</span>
</CButton>
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
<i class="fa fa-google-plus"></i><span>Google+</span>
</CButton>
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
<i class="fa fa-instagram"></i><span>Instagram</span>
</CButton>
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
<i class="fa fa-pinterest"></i><span>Pinterest</span>
</CButton>
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
<i class="fa fa-vk"></i><span>VK</span>
</CButton>
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
<i class="fa fa-yahoo"></i><span>Yahoo</span>
</CButton>
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
<i class="fa fa-behance"></i><span>Behance</span>
</CButton>
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
<i class="fa fa-dropbox"></i><span>Dropbox</span>
</CButton>
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
<i class="fa fa-reddit"></i><span>Reddit</span>
</CButton>
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
<i class="fa fa-spotify"></i><span>Spotify</span>
</CButton>
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
<i class="fa fa-vine"></i><span>Vine</span>
</CButton>
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
<i class="fa fa-foursquare"></i><span>Forsquare</span>
</CButton>
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
<i class="fa fa-vimeo"></i><span>Vimeo</span>
</CButton>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="lg" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="lg" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="lg" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="lg" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="lg" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="lg" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -166,91 +65,48 @@
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<small>Usage </small>
<code>
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="sm" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="sm" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="sm" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="sm" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="sm" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="sm" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="sm" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="sm" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="sm" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="sm" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="sm" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="sm" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="sm" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="sm" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="sm" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="sm" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="sm" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="sm" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="sm" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="sm" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="sm" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="sm" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="sm" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="sm" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="lg" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="lg" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="lg" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="lg" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="lg" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="lg" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="lg" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="lg" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="lg" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="lg" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="lg" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="lg" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="lg" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="lg" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="lg" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="lg" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="lg" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="lg" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="lg" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="lg" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="lg" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="lg" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="lg" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -262,91 +118,45 @@
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton size="sm" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton size="sm" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton size="sm" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton size="sm" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton size="sm" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton size="sm" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton size="sm" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton size="sm" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton size="sm" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton size="sm" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton size="sm" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton size="sm" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton size="sm" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton size="sm" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton size="sm" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton size="sm" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton size="sm" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton size="sm" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton size="sm" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton size="sm" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton size="sm" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton size="sm" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton size="sm" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton size="sm" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton size="lg" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton size="lg" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton size="lg" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton size="lg" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton size="lg" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton size="lg" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -358,12 +168,53 @@
<script>
export default {
name: 'brand-buttons',
brands: ['facebook', 'twitter', 'linkedin']
brands: [
'facebook',
'twitter',
'linkedin',
'flickr',
'tumblr',
'xing',
'github',
'stack-overflow',
'youtube',
'dribbble',
'instagram',
'pinterest',
'vk',
'yahoo',
'behance',
'reddit',
'vimeo'
]
// labels: {
// facebook: 'Facebook',
// twitter: 'Twitter',
// linkedin: 'LinkedIn',
// flickr: 'Flickr',
// tumblr: 'Tumblr',
// xing: 'Xing',
// github: 'Github',
// 'stack-overflow': 'StackOverflow',
// youtube: 'YouTube',
// dribbble: 'Dribbble',
// instagram: 'Instagram',
// pinterest: 'Pinterest',
// vk: 'VK',
// yahoo: 'Yahoo',
// behance: 'Behance',
// reddit: 'Reddit',
// vimeo: 'Vimeo'
// }
}
</script>
<style scoped lang="css">
.btn {
.c-btn {
margin-bottom: 4px;
margin-right: 6px;
}
.c-btn svg + span {
margin-left: 8px;
}
</style>
src/views/icons/CoreUIIcons.vue
+6 -5
View File
@@ -431,14 +431,15 @@
</div>
</template>
<script>
import icons from '@coreui/icons'
const iconNames = Object.keys(icons)
import { iconSet } from '@coreui/icons'
const iconNames = Object.keys(iconSet)
export default {
name: 'CoreUIIcons',
iconNames,
mounted () {
console.log(this.$options.iconNames)
}
// mounted () {
// console.log(this.$options.iconNames)
// }
}
</script>
src/views/icons/Flags.vue
+19 -997
View File
File diff suppressed because it is too large Load Diff
src/views/icons/FontAwesome.vue
-2848
View File
File diff suppressed because it is too large Load Diff
src/views/icons/SimpleLineIcons.vue
-751
View File
@@ -1,751 +0,0 @@
<template>
<div class="c-animated c-fadeIn">
<CCard class="c-card-default">
<CCardHeader>
<i class="fa fa-picture-o"></i> Simple Line Icons
</CCardHeader>
<CCardBody>
<CRow class="c-text-center">
<CCol col="6" sm="4" md="3">
<i class="icon-user icons c-font-2xl c-d-block c-mt-4"></i>icon-user
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-people icons c-font-2xl c-d-block c-mt-4"></i>icon-people
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-user-female icons c-font-2xl c-d-block c-mt-4"></i>icon-user-female
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-user-follow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-follow
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-user-following icons c-font-2xl c-d-block c-mt-4"></i>icon-user-following
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-user-unfollow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-unfollow
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-login icons c-font-2xl c-d-block c-mt-4"></i>icon-login
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-logout icons c-font-2xl c-d-block c-mt-4"></i>icon-logout
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-emotsmile icons c-font-2xl c-d-block c-mt-4"></i>icon-emotsmile
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-phone icons c-font-2xl c-d-block c-mt-4"></i>icon-phone
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-call-end icons c-font-2xl c-d-block c-mt-4"></i>icon-call-end
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-call-in icons c-font-2xl c-d-block c-mt-4"></i>icon-call-in
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-call-out icons c-font-2xl c-d-block c-mt-4"></i>icon-call-out
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-map icons c-font-2xl c-d-block c-mt-4"></i>icon-map
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-location-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-location-pin
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-direction icons c-font-2xl c-d-block c-mt-4"></i>icon-direction
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-directions icons c-font-2xl c-d-block c-mt-4"></i>icon-directions
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-compass icons c-font-2xl c-d-block c-mt-4"></i>icon-compass
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-layers icons c-font-2xl c-d-block c-mt-4"></i>icon-layers
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-menu icons c-font-2xl c-d-block c-mt-4"></i>icon-menu
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-list icons c-font-2xl c-d-block c-mt-4"></i>icon-list
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-options-vertical icons c-font-2xl c-d-block c-mt-4"></i>icon-options-vertical
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-options icons c-font-2xl c-d-block c-mt-4"></i>icon-options
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-down icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-left icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-right icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-up icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-up-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up-circle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-left-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left-circle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-right-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right-circle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-arrow-down-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down-circle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-check icons c-font-2xl c-d-block c-mt-4"></i>icon-check
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-clock icons c-font-2xl c-d-block c-mt-4"></i>icon-clock
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-plus icons c-font-2xl c-d-block c-mt-4"></i>icon-plus
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-close icons c-font-2xl c-d-block c-mt-4"></i>icon-close
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-trophy icons c-font-2xl c-d-block c-mt-4"></i>icon-trophy
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-screen-smartphone icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-smartphone
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-screen-desktop icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-desktop
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-plane
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-notebook icons c-font-2xl c-d-block c-mt-4"></i>icon-notebook
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-mustache icons c-font-2xl c-d-block c-mt-4"></i>icon-mustache
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-mouse icons c-font-2xl c-d-block c-mt-4"></i>icon-mouse
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-magnet icons c-font-2xl c-d-block c-mt-4"></i>icon-magnet
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-energy icons c-font-2xl c-d-block c-mt-4"></i>icon-energy
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-disc icons c-font-2xl c-d-block c-mt-4"></i>icon-disc
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-cursor icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-cursor-move icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor-move
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-crop icons c-font-2xl c-d-block c-mt-4"></i>icon-crop
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-chemistry icons c-font-2xl c-d-block c-mt-4"></i>icon-chemistry
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-speedometer icons c-font-2xl c-d-block c-mt-4"></i>icon-speedometer
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-shield icons c-font-2xl c-d-block c-mt-4"></i>icon-shield
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-screen-tablet icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-tablet
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-magic-wand icons c-font-2xl c-d-block c-mt-4"></i>icon-magic-wand
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-hourglass icons c-font-2xl c-d-block c-mt-4"></i>icon-hourglass
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-graduation icons c-font-2xl c-d-block c-mt-4"></i>icon-graduation
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-ghost icons c-font-2xl c-d-block c-mt-4"></i>icon-ghost
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-game-controller icons c-font-2xl c-d-block c-mt-4"></i>icon-game-controller
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-fire icons c-font-2xl c-d-block c-mt-4"></i>icon-fire
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-eyeglass icons c-font-2xl c-d-block c-mt-4"></i>icon-eyeglass
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-envelope-open icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-open
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-envelope-letter icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-letter
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-bell icons c-font-2xl c-d-block c-mt-4"></i>icon-bell
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-badge icons c-font-2xl c-d-block c-mt-4"></i>icon-badge
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-anchor icons c-font-2xl c-d-block c-mt-4"></i>icon-anchor
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-wallet icons c-font-2xl c-d-block c-mt-4"></i>icon-wallet
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-vector icons c-font-2xl c-d-block c-mt-4"></i>icon-vector
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-speech icons c-font-2xl c-d-block c-mt-4"></i>icon-speech
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-puzzle icons c-font-2xl c-d-block c-mt-4"></i>icon-puzzle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-printer icons c-font-2xl c-d-block c-mt-4"></i>icon-printer
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-present icons c-font-2xl c-d-block c-mt-4"></i>icon-present
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-playlist icons c-font-2xl c-d-block c-mt-4"></i>icon-playlist
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-pin
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-picture icons c-font-2xl c-d-block c-mt-4"></i>icon-picture
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-handbag icons c-font-2xl c-d-block c-mt-4"></i>icon-handbag
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-globe-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-globe-alt
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-globe icons c-font-2xl c-d-block c-mt-4"></i>icon-globe
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-folder-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-folder-alt
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-folder icons c-font-2xl c-d-block c-mt-4"></i>icon-folder
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-film icons c-font-2xl c-d-block c-mt-4"></i>icon-film
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-feed icons c-font-2xl c-d-block c-mt-4"></i>icon-feed
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-drop icons c-font-2xl c-d-block c-mt-4"></i>icon-drop
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-drawer icons c-font-2xl c-d-block c-mt-4"></i>icon-drawer
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-docs icons c-font-2xl c-d-block c-mt-4"></i>icon-docs
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-doc icons c-font-2xl c-d-block c-mt-4"></i>icon-doc
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-diamond icons c-font-2xl c-d-block c-mt-4"></i>icon-diamond
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-cup icons c-font-2xl c-d-block c-mt-4"></i>icon-cup
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-calculator icons c-font-2xl c-d-block c-mt-4"></i>icon-calculator
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-bubbles icons c-font-2xl c-d-block c-mt-4"></i>icon-bubbles
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-briefcase icons c-font-2xl c-d-block c-mt-4"></i>icon-briefcase
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-book-open icons c-font-2xl c-d-block c-mt-4"></i>icon-book-open
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-basket-loaded icons c-font-2xl c-d-block c-mt-4"></i>icon-basket-loaded
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-basket icons c-font-2xl c-d-block c-mt-4"></i>icon-basket
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-bag icons c-font-2xl c-d-block c-mt-4"></i>icon-bag
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-action-undo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-undo
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-action-redo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-redo
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-wrench icons c-font-2xl c-d-block c-mt-4"></i>icon-wrench
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-umbrella icons c-font-2xl c-d-block c-mt-4"></i>icon-umbrella
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-trash icons c-font-2xl c-d-block c-mt-4"></i>icon-trash
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-tag icons c-font-2xl c-d-block c-mt-4"></i>icon-tag
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-support icons c-font-2xl c-d-block c-mt-4"></i>icon-support
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-frame icons c-font-2xl c-d-block c-mt-4"></i>icon-frame
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-size-fullscreen icons c-font-2xl c-d-block c-mt-4"></i>icon-size-fullscreen
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-size-actual icons c-font-2xl c-d-block c-mt-4"></i>icon-size-actual
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-shuffle icons c-font-2xl c-d-block c-mt-4"></i>icon-shuffle
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-share-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-share-alt
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-share icons c-font-2xl c-d-block c-mt-4"></i>icon-share
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-rocket icons c-font-2xl c-d-block c-mt-4"></i>icon-rocket
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-question icons c-font-2xl c-d-block c-mt-4"></i>icon-question
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-pie-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-pie-chart
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-pencil icons c-font-2xl c-d-block c-mt-4"></i>icon-pencil
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-note icons c-font-2xl c-d-block c-mt-4"></i>icon-note
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-loop icons c-font-2xl c-d-block c-mt-4"></i>icon-loop
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-home icons c-font-2xl c-d-block c-mt-4"></i>icon-home
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-grid icons c-font-2xl c-d-block c-mt-4"></i>icon-grid
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-graph icons c-font-2xl c-d-block c-mt-4"></i>icon-graph
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-microphone icons c-font-2xl c-d-block c-mt-4"></i>icon-microphone
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-music-tone-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone-alt
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-music-tone icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-earphones-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones-alt
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-earphones icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-equalizer icons c-font-2xl c-d-block c-mt-4"></i>icon-equalizer
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-like icons c-font-2xl c-d-block c-mt-4"></i>icon-like
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-dislike icons c-font-2xl c-d-block c-mt-4"></i>icon-dislike
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-start icons c-font-2xl c-d-block c-mt-4"></i>icon-control-start
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-rewind icons c-font-2xl c-d-block c-mt-4"></i>icon-control-rewind
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-play icons c-font-2xl c-d-block c-mt-4"></i>icon-control-play
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-pause icons c-font-2xl c-d-block c-mt-4"></i>icon-control-pause
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-forward icons c-font-2xl c-d-block c-mt-4"></i>icon-control-forward
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-control-end icons c-font-2xl c-d-block c-mt-4"></i>icon-control-end
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-volume-1 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-1
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-volume-2 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-2
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-volume-off icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-off
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-calendar icons c-font-2xl c-d-block c-mt-4"></i>icon-calendar
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-bulb icons c-font-2xl c-d-block c-mt-4"></i>icon-bulb
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-chart
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-ban icons c-font-2xl c-d-block c-mt-4"></i>icon-ban
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-bubble icons c-font-2xl c-d-block c-mt-4"></i>icon-bubble
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-camrecorder icons c-font-2xl c-d-block c-mt-4"></i>icon-camrecorder
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-camera icons c-font-2xl c-d-block c-mt-4"></i>icon-camera
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-cloud-download icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-download
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-cloud-upload icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-upload
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-envelope icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-eye icons c-font-2xl c-d-block c-mt-4"></i>icon-eye
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-flag icons c-font-2xl c-d-block c-mt-4"></i>icon-flag
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-heart icons c-font-2xl c-d-block c-mt-4"></i>icon-heart
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-info icons c-font-2xl c-d-block c-mt-4"></i>icon-info
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-key icons c-font-2xl c-d-block c-mt-4"></i>icon-key
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-link icons c-font-2xl c-d-block c-mt-4"></i>icon-link
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-lock icons c-font-2xl c-d-block c-mt-4"></i>icon-lock
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-lock-open icons c-font-2xl c-d-block c-mt-4"></i>icon-lock-open
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-magnifier icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-magnifier-add icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-add
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-magnifier-remove icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-remove
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-paper-clip icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-clip
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-paper-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-plane
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-power icons c-font-2xl c-d-block c-mt-4"></i>icon-power
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-refresh icons c-font-2xl c-d-block c-mt-4"></i>icon-refresh
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-reload icons c-font-2xl c-d-block c-mt-4"></i>icon-reload
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-settings icons c-font-2xl c-d-block c-mt-4"></i>icon-settings
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-star icons c-font-2xl c-d-block c-mt-4"></i>icon-star
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-symbol-female icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-female
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-symbol-male icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-male
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-target icons c-font-2xl c-d-block c-mt-4"></i>icon-target
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-credit-card icons c-font-2xl c-d-block c-mt-4"></i>icon-credit-card
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-paypal icons c-font-2xl c-d-block c-mt-4"></i>icon-paypal
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-tumblr icons c-font-2xl c-d-block c-mt-4"></i>icon-social-tumblr
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-twitter icons c-font-2xl c-d-block c-mt-4"></i>icon-social-twitter
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-facebook icons c-font-2xl c-d-block c-mt-4"></i>icon-social-facebook
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-instagram icons c-font-2xl c-d-block c-mt-4"></i>icon-social-instagram
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-linkedin icons c-font-2xl c-d-block c-mt-4"></i>icon-social-linkedin
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-pinterest icons c-font-2xl c-d-block c-mt-4"></i>icon-social-pinterest
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-github icons c-font-2xl c-d-block c-mt-4"></i>icon-social-github
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-gplus icons c-font-2xl c-d-block c-mt-4"></i>icon-social-gplus
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-reddit icons c-font-2xl c-d-block c-mt-4"></i>icon-social-reddit
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-skype icons c-font-2xl c-d-block c-mt-4"></i>icon-social-skype
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-dribbble icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dribbble
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-behance icons c-font-2xl c-d-block c-mt-4"></i>icon-social-behance
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-foursqare icons c-font-2xl c-d-block c-mt-4"></i>icon-social-foursqare
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-soundcloud icons c-font-2xl c-d-block c-mt-4"></i>icon-social-soundcloud
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-spotify icons c-font-2xl c-d-block c-mt-4"></i>icon-social-spotify
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-stumbleupon icons c-font-2xl c-d-block c-mt-4"></i>icon-social-stumbleupon
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-youtube icons c-font-2xl c-d-block c-mt-4"></i>icon-social-youtube
</CCol>
<CCol col="6" sm="4" md="3">
<i class="icon-social-dropbox icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dropbox
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'simple-line-icons'
}
</script>