소개

font awesomen의 브랜드 아이콘을 사용하려고 할 때, 색을 지정하지 않으면 아래와 같이 흐릿한 느낌이 되어 버립니다.



다음과 같이 컬러 코드를 지정하여 일단 해결할 수있었습니다. 하드 코딩하는 것은 이해하기 어렵고 생각합니다.

<template>
  <v-container fluid>
    <v-row>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
          <v-icon left color="#211F1F">fab fa-github</v-icon>
          <span>Github</span>
        </v-btn>
      </v-col>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
          <v-icon left color="#1DA1F2">fab fa-twitter</v-icon>
          <span>Twitter</span>
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

그래서 Vuetify에 자신의 컬러 테마를 설정하고 color="twitter" 와 같이 설정합니다.

Vuetify.js 설정

vue add vuetify 에서 Vuetify를 설치한 경우 src/plugins/vutify.js 가 있을 것이므로 이를 수정해 갑니다.

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
})

Vuetify에 컬러 테마를 설정하려면 theme 속성을 Vuetify 생성자에 전달하면됩니다. 이 때, primaty , success 나 error 등의 표준 테마가 지정되지 않았던 경우, 디폴트의 것을 사용할 수 있습니다.

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
    }
  }
})

이제 color="github" 또는 color="twitter" 로 지정하면 적절한 색상을 지정할 수 있습니다.
코드를 읽을 때의 의도도 이해하기 쉬워졌습니다.

<template>
  <v-container fluid>
    <v-row>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
-          <v-icon left color="#211F1F">fab fa-github</v-icon>
+          <v-icon left color="github">fab fa-github</v-icon>
          <span>Github</span>
        </v-btn>
      </v-col>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
-          <v-icon left color="#1DA1F2">fab fa-twitter</v-icon>
+          <v-icon left color="twitter">fab fa-twitter</v-icon>
          <span>Twitter</span>
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

어두운 테마용 색상 설정

theme 프로퍼티에는 light 와 같은 프로퍼티 밖에 건네주지 않기 때문에, 다크 테마를 적용했을 때에 이대로에서는 칼라가 올바르게 설정되지 않습니다.


dark 프로퍼티에도 같은 것을 건네줍니다

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
      dark: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
    }
  }
})

DRY 원칙을 지키기 위해 수정하자. 그런 다음 어두운 테마를 적용하면 Github 아이콘이 보이지 않으므로 어두운 테마를 적용 할 때 흰색이됩니다.

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
<img width="1424" alt="スクリーンショット 2020-04-25 15.39.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/7c6653dd-16a3-f165-8a92-34c2edee8ba7.png">

Vue.use(Vuetify)

const brands = {
  github: '#211F1F',
  facebook: '#3B5998',
  twitter: '#1DA1F2',
  qiita: '#4cb10d'
}

export default new Vuetify({
  theme: {
    themes: {
      light: brands,
      dark: {
        ...brands,
        github: '#fff' // スプレッド演算子で渡した後に上書き
      }
    }
  }
})

이제 제대로 반영되었습니다!

참고

테마 — Vuetify.js
【저장판】 페이스 북, 트위터, 인스타 ... 주요 SNS 폰트, 컬러 총 정리