Front/Vue
-
[ Vite + Vue ] Svg Loader, svg 아이콘 컴포넌트Front/Vue 2025. 6. 3. 17:14
svg 아이콘을 좀 더 편하게 사용하기 위해svg 컴포넌트를 구현 Installmentvite에서 svg를 사용하기위해서 vite-plugin-svgr을 설치npm install vite-plugin-svgr --save-dev 이후 vite.config.ts에서 svgLoader plugin을 등록import svgLoader from 'vite-svg-loader'// https://vite.dev/config/export default defineConfig({ plugins: [vue(), svgLoader()],SVG Icon우선 svg 아이콘 관리를 위해 constant > icon.ts 파일을 만들어 svg 아이콘을 상수화 작업을 진행import calendarIcon from "@/ass..
-
[ Vue ] 다크모드 화이트모드 시스템 테마 설정하기Front/Vue 2025. 5. 18. 18:27
이전에 react에서 했던 다크모드와 화이트모드 설정은 직접 class를 하나씩 주는 방식으로 했었는데이 부분에서 많은 노가다가 필요했었기에 보통 페이지들에서 사용하는 방식인data-theme을 주는 방식으로 진행Stylestyle 폴더에서 variable.css파일을 생성하여 스타일 변수를 저장하는 파일로 관리이후 main에 해당 css파일을 import해주면 된다. data-theme이 white는 화이트 모드data-theme이 dark는 다크모드 이때 변수명은 둘다 동일하게 가져가야한다.:root { --app-root-padding: 10px;}:root[data-theme='white'] { --app-theme-side-background: #f3f3f3; --app-them..