Skip to content

Commit

Permalink
feat: replace font-awesome with SVG's (#180)
Browse files Browse the repository at this point in the history 
closes #177
  • Loading branch information
@devCrossNet
devCrossNet committed Jul 25, 2018
1 parent a30fad4 commit da9422f
Show file tree
Hide file tree
Showing 42 changed files with 542 additions and 162 deletions.
6 changes: 6 additions & 0 deletions .storybook/preview-head.html
View file
Expand Up @@ -28,5 +28,11 @@
th {
color: #000 !important;
}

i svg {
height: 32px;
width: 32px;
fill: #FFF;
}
</style>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" type="text/css">
33 changes: 24 additions & 9 deletions src/app/app/App/App.vue
View file
Expand Up @@ -6,43 +6,43 @@
<ul :class="$style.nav">
<li>
<a href="/docs" @click.native="navBarClose">
<i class="fas fa-book" />
<vue-icon-book />
<small>{{ $t('App.nav.docs' /* Documentation */) }}</small>
</a>
</li>
<li>
<router-link to="/counter" @click.native="navBarClose">
<i class="fas fa-hashtag" />
<vue-icon-hashtag />
<small>{{ $t('App.nav.counter' /* Counter */) }}</small>
</router-link>
</li>
<li>
<router-link to="/components" @click.native="navBarClose">
<i class="fas fa-puzzle-piece" />
<vue-icon-puzzle-piece />
<small>{{ $t('App.nav.components' /* Components */) }}</small>
</router-link>
</li>
<li>
<a @click="localeSwitch('en')">
<i class="fas fa-flag" />
<vue-icon-flag />
<small>English</small>
</a>
</li>
<li>
<a @click="localeSwitch('de')">
<i class="fas fa-flag" />
<vue-icon-flag />
<small>Deutsch</small>
</a>
</li>
<li>
<a @click="localeSwitch('pt')">
<i class="fas fa-flag" />
<vue-icon-flag />
<small>Português</small>
</a>
</li>
<li>
<a @click="localeSwitch('zh-cn')">
<i class="fas fa-flag" />
<vue-icon-flag />
<small>中文</small>
</a>
</li>
Expand Down Expand Up @@ -73,9 +73,17 @@
import VueCookieConsent from '../../shared/components/VueCookieConsent/VueCookieConsent';
import { loadLocaleAsync } from '../../shared/plugins/i18n/i18n';
import { EventBus } from '../../shared/services/EventBus';
import VueIconBook from '../../shared/components/icons/VueIconBook/VueIconBook';
import VueIconHashtag from '../../shared/components/icons/VueIconHashtag/VueIconHashtag';
import VueIconPuzzlePiece from '../../shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece';
import VueIconFlag from '../../shared/components/icons/VueIconFlag/VueIconFlag';
export default {
components: {
VueIconFlag,
VueIconPuzzlePiece,
VueIconHashtag,
VueIconBook,
VueCookieConsent,
VueNavBar,
VueGrid,
Expand Down Expand Up @@ -138,22 +146,29 @@
cursor: pointer;
a {
padding: $space-unit;
padding: $space-unit * 2;
display: block;
color: $text-color;
text-align: center;
font-size: 32px;
text-decoration: none;
small {
font-size: 12px;
display: block;
}
i {
height: 32px;
width: 32px;
}
}
}
@include media(tabletLandscape) {
margin: 0;
li {
margin: $space-unit;
opacity: .8;
transition: opacity 250ms linear;
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/Components/Components.vue
View file
Expand Up @@ -215,21 +215,21 @@
<vue-grid-item class="vueGridItem">
<h2>Tabs</h2>
<vue-tab-group>
<vue-tab-item title="Profile" icon="fas fa-user">
<vue-tab-item title="Profile">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</vue-tab-item>
<vue-tab-item title="Settings" icon="fas fa-cog">
<vue-tab-item title="Settings">
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</vue-tab-item>
<vue-tab-item title="Upload" icon="fas fa-upload">
<vue-tab-item title="Upload">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Expand Down
22 changes: 13 additions & 9 deletions src/app/home/DevEx/DevEx.vue
View file
Expand Up @@ -10,7 +10,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-code" />
<vue-icon-code />
<h3>Quick scaffolding</h3>
<p>Create components, connected components, modules - and their tests - right from the CLI!</p>
</vue-panel-body>
Expand All @@ -20,7 +20,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-bullhorn" />
<vue-icon-bullhorn />
<h3>Instant feedback</h3>
<p>Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes
to
Expand All @@ -37,14 +37,18 @@
</template>

<script lang="ts">
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueIconCode from '../../shared/components/icons/VueIconCode/VueIconCode';
import VueIconBullhorn from '../../shared/components/icons/VueIconBullhorn/VueIconBullhorn';
export default {
components: {
VueIconBullhorn,
VueIconCode,
VueGrid,
VueGridItem,
VuePanel,
Expand All @@ -62,8 +66,8 @@
text-align: center;
i {
display: inline-block;
font-size: $font-size-h1;
height: $font-size-h1;
width: $font-size-h1;
margin-top: $space-unit;
}
Expand Down
25 changes: 16 additions & 9 deletions src/app/home/EnterpriseReady/EnterpriseReady.vue
View file
Expand Up @@ -8,7 +8,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-chart-line" />
<vue-icon-chart-line />
<h3>SEO</h3>
<p>We support SEO (document head tags management) and server-side-rendering for search engines that
support
Expand All @@ -20,7 +20,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-certificate" />
<vue-icon-certificate />
<h3>Best practices</h3>
<p>A Common style guide, TypeScript, and the best test setup: Automatically guarantee code quality and
non-breaking changes.</p>
Expand All @@ -31,7 +31,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-flag" />
<vue-icon-flag />
<h3>i18n</h3>
<p>Scalable apps need to support multiple languages, easily add and support multiple languages with
vue-i18n.</p>
Expand All @@ -44,14 +44,20 @@
</template>

<script lang="ts">
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VueIconChartLine from '../../shared/components/icons/VueIconChartLine/VueIconChartLine';
import VueIconCertificate from '../../shared/components/icons/VueIconCertificate/VueIconCertificate';
import VueIconFlag from '../../shared/components/icons/VueIconFlag/VueIconFlag';
export default {
components: {
VueIconFlag,
VueIconCertificate,
VueIconChartLine,
VueGrid,
VueGridItem,
VuePanel,
Expand All @@ -70,7 +76,8 @@
i {
display: inline-block;
font-size: $font-size-h1;
height: $font-size-h1;
width: $font-size-h1;
margin-top: $space-unit;
}
Expand Down
10 changes: 8 additions & 2 deletions src/app/home/Stage/Stage.vue
View file
Expand Up @@ -17,7 +17,7 @@

<a :class="$style.github" href="https://github.com/devCrossNet/vue-starter" target="_blank" rel="noopener"
aria-label="github repository">
<i class="fab fa-github"></i>
<vue-icon-github />
</a>
</vue-grid-item>
</vue-grid-row>
Expand All @@ -30,9 +30,10 @@
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VueIconGithub from '../../shared/components/icons/VueIconGithub/VueIconGithub';
export default {
components: { VueGridItem, VueGridRow, VueGrid },
components: { VueIconGithub, VueGridItem, VueGridRow, VueGrid },
props: {
disableParticles: {
type: Boolean,
Expand Down Expand Up @@ -190,5 +191,10 @@
@include media(tabletLandscape) {
top: $space-unit * 42;
}
i {
height: $font-size-h1;
width: $font-size-h1;
}
}
</style>
25 changes: 16 additions & 9 deletions src/app/home/UserExperience/UserExperience.vue
View file
Expand Up @@ -9,7 +9,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-spinner" />
<vue-icon-spinner />
<h3>Animations</h3>
<p>A stable animations set up already included (<a href="http://animejs.com/" target="_blank"
rel="noopener">anime.js</a>).</p>
Expand All @@ -20,7 +20,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-mobile" />
<vue-icon-mobile />
<h3>Progressive-Web-App</h3>
<p>Offline-first support with service-workers and a lighthouse score as high as possible (90+).</p>
</vue-panel-body>
Expand All @@ -30,7 +30,7 @@
<vue-grid-item class="vueGridItem">
<vue-panel class="vuePanel">
<vue-panel-body>
<i class="fas fa-puzzle-piece" />
<vue-icon-puzzle-piece />
<h3>Components</h3>
<p>
A flexible component library that'll be extended over time.
Expand All @@ -49,14 +49,20 @@
</template>

<script lang="ts">
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VueGrid from '../../shared/components/VueGrid/VueGrid';
import VueGridItem from '../../shared/components/VueGridItem/VueGridItem';
import VuePanel from '../../shared/components/VuePanel/VuePanel';
import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
import VueGridRow from '../../shared/components/VueGridRow/VueGridRow';
import VueIconSpinner from '../../shared/components/icons/VueIconSpinner/VueIconSpinner';
import VueIconMobile from '../../shared/components/icons/VueIconMobile/VueIconMobile';
import VueIconPuzzlePiece from '../../shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece';
export default {
components: {
VueIconPuzzlePiece,
VueIconMobile,
VueIconSpinner,
VueGrid,
VueGridItem,
VuePanel,
Expand All @@ -75,7 +81,8 @@
i {
display: inline-block;
font-size: $font-size-h1;
height: $font-size-h1;
width: $font-size-h1;
margin-top: $space-unit;
}
Expand Down
4 changes: 3 additions & 1 deletion src/app/shared/components/VueAutocomplete/VueAutocomplete.vue
View file
Expand Up @@ -24,7 +24,7 @@
@focus="onFocus"
/>

<i class="fas fa-search" v-show="isLoading === false" />
<vue-icon-search v-show="isLoading === false" />
<vue-loader :class="$style.loader" accent v-show="isLoading === true" />

<ul
Expand Down Expand Up @@ -57,10 +57,12 @@
import { createGUID } from '../../utils/misc';
import { IAutocompleteOption } from './IAutocompleteOption';
import VueLoader from '../VueLoader/VueLoader';
import VueIconSearch from '../icons/VueIconSearch/VueIconSearch';
export default {
name: 'VueAutocomplete',
components: {
VueIconSearch,
VueLoader,
VueInput,
},
Expand Down
11 changes: 0 additions & 11 deletions src/app/shared/components/VueButton/VueButton.spec.ts
View file
Expand Up @@ -91,15 +91,4 @@ describe('VueButton.vue', () => {
expect(wrapper.findAll(`.pulse`)).toHaveLength(1);
});

test('should add icon', () => {
const wrapper = mount(VueButton, {
localVue,
propsData: {
icon: 'user',
},
});

expect(wrapper.findAll(`.fa-user`)).toHaveLength(1);
});

});

0 comments on commit da9422f

Please sign in to comment.