Icon · Nuxt ModulesIcon module for Nuxt with 200,000+ ready to use icons from Iconify.nuxt.com 기본 세팅설치npm i -D @nuxt/icon nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/icon' ]}) 사용 방법1. Iconify provider 사용export default defineNuxtConfig({ icon: { size: '14px', class: 'icon', mode: 'svg', provider: 'iconify' },});provider를 iconify로 하면 별도의 데이터셋을 프로젝트에 저장할 필..
Icon
검색 가능한 SelectBox를 구현하며 돋보기 아이콘을 placeholder로 적용해 기본 SelectBox와 차이를 두려고 했다. 다만 input 요소의 placeholder 속성에는 직접적으로 아이콘을 표시할 수는 없기 때문에 다른 방법을 사용해야 한다. 1. 아이콘 넣기input 태그와 동일한 상위 요소의 하위에 원하는 icon 태그를 넣고 absolute 속성을 활용해 자리를 적절히 배치해준다..search-icon { position: absolute; left: 1rem; pointer-events: none; font-size: 1.2rem;} 2. 아이콘 표시 상태 변수 추가display 속성을 활용해 아이콘을 표시하거나 숨겨준다.이때 addEventListener 대신 아..
