어떻게 Vue에서.JS에서 아이콘 구성 요소 사용하기
본고는 원문을 번역하고 React 개발자의 측면에서 간단하게 해석했다.
이 글에는 글꼴 아이콘과 SVG sprite가 없습니다.이 토론에서만 사용자가 필요에 따라 가져올 수 있는 아이콘 시스템을 사용합니다.
There are three major ways of exposing API of an icon component in Vue.js and each one of them has its own pros & cons:
Vue에서.js의 생태에는 3가지 주류 API 형태가 있는데 각각의 장단점이 있다.
1. 단일 구성 요소 (예:
아이콘의 데이터는 전역'풀'을 통해 등록됩니다.
// v-icon/flag.js
import Icon from 'v-icon'
import { mdiFlag } from '@mdi/js'
Icon.add('flag', mdiFlag)
<template>
<v-icon name="flag" />
</template>
<script>
import VIcon from 'v-icon'
import 'v-icon/flag'
export default {
components: {
VIcon
}
}
</script>Font Awesome 공식적인 Vue.js 구성 요소는 약간 다른 방안을 사용했는데 사용자 스스로 아이콘을 전역의 연못에 주동적으로 추가하도록 했다. (이 방식을 이 방안으로 분류해서는 안 될 수도 있다.)
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret)
<template>
<v-icon :content="mdiFlag" />
</template>
<script>
import VIcon from 'v-icon'
import { mdiFlag } from '@mdi/js'
export default {
components: {
VIcon
},
created() {
Object.assign(this, {
mdiFlag
})
}
}
</script>3. 각 구성 요소는 서로 다른 아이콘(예를 들어
이 시나리오에서는 각 구성 요소가 하나의 아이콘 공장을 통해 만들어집니다.
// icon-flag.js
import { mdiFlag } from '@mdi/js'
import { createIcon } from 'v-icon'
export default createIcon('flag', mdiFlag)
<template>
<icon-flag />
</template>
<script>
import { IconFlag } from 'v-icon'
export default {
components: {
VIcon,
IconFlag
}
}
</script>각 구성 요소는 아이콘을 나타냅니다.
나는 이런 방안이 Vue에 있다는 것을 더욱 깊이 있게 말할 것이다.js에서 사용합니다.
Vue에서.js에서 템플릿과 스크립트는 분리되어 있으며, 구성 요소는components 옵션을 통해 등록됩니다.그러나 우리가 알고 있는 바와 같이 만약 구성 요소가 아이콘을 많이 사용한다면 이런 방식은 매우 번거로울 것이다.
Vue 2
<template>
<div>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? IconFlag : IconStar" />
</div>
</template>
<script>
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
data() {
return {
flag: true
}
},
created() {
Object.assign(this, {
IconFlag,
IconStar
})
}
}
</script>
<template>
<div>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? 'icon-flag' : 'icon-star'" />
</div>
</template>
<script>
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
data() {
return {
flag: true
}
}
}
</script>
<template>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? IconFlag : IconStar" />
</template>
<script>
import { ref } from 'vue'
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
setup() {
const flag = ref(true)
return {
flag,
IconFlag,
IconStar
}
}
}
</script>
import { ref } from 'vue'
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
setup() {
const flag = ref(true)
return {
flag
}
}
}
<template>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? 'icon-flag' : 'icon-star'" />
</template>
<script components>
export { IconFlag, IconStar } from 'foo-icons'
</script>
<script>
import { ref } from 'vue'
export default {
setup() {
const flag = ref(true)
return {
flag
}
}
}
</script>
<script setup>
import { ref } from 'vue'
export const flag = ref(true)
</script>이 글은 Vue에서 필요에 따라 아이콘을 도입하는 방식을 세련되게 소개하고 React 커뮤니티와 비교하면 두 생태의 차이가 여전히 존재하는 것을 볼 수 있다.React 커뮤니티에서 세 번째 방식(아이콘마다 하나의 구성 요소)을 사용하는 것은 매우 보편적이다. 예를 들어 NPM에서 순위가 높은 react-icons와 유명한 구성 요소 라이브러리인 @ant-design/icons, @material-ui/icons가 모두 이런 형태이다.
이것은 React 커뮤니티에서'구성 요소'라는 개념을 특수화하는 경향이 없기 때문에 구성 요소는 일반적인 함수, 일반적인 클래스이기 때문에 다른 함수, 클래스의 복용과 같다. lodash가 많은 도구 함수를 내보내는 것처럼 하나의 아이콘 라이브러리는 많은 아이콘 구성 요소를 내보내는 것이 매우 합리적이다.
글에서createIcon 공장 함수를 사용하는 데 최적화된 점이 있습니다.공장 함수를 정상적으로 사용하면 생성된 구성 요소가treeshaking될 수 없습니다. 문법 분석에서createIcon 함수 자체가 부작용이 있다고 생각하기 때문에 이 호출은 안전하게 삭제될 수 없습니다.terser의 특수 주석을 통해 표시할 수 있습니다.
// icon-flag.js
import { mdiFlag } from '@mdi/js'
import { createIcon } from 'v-icon'
export default /*#__PURE__*/createIcon('flag', mdiFlag)이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
