>  기사  >  웹 프론트엔드  >  vue3+vue-cli4에서 svg를 사용하는 방법

vue3+vue-cli4에서 svg를 사용하는 방법

WBOY
WBOY앞으로
2023-05-11 17:58:061184검색

1. svg-sprite-loader

npm install svg-sprite-loader --save-dev

2를 설치합니다. src/comComponents/svgIcon

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" rel="external nofollow" ></use>
  </svg>
</template>

<script>
import { computed } from "@vue/reactivity";
export default {
  name: "baseSvgIcon",
  props: {
    iconClass: { type: String },
    className: { type: String },
  },
  setup(props) {
    const iconName = computed(() => {
      return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
    });
    const svgClass = computed(() => {
      return props.className ? "svg-icon " + props.className : "svg-icon";
    });
    return { iconName, svgClass };
  },
};
</script>

<style scoped lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3에 svg 폴더가 포함된 아이콘 폴더를 만듭니다. format 파일과 index.js 파일의 내용은 다음과 같습니다

// 获取当前目录所有为.svg的文件
const req = require.context(&#39;./svg&#39;, false, /\.svg$/)

// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{
    return requireContext.keys().map(requireContext)
}
requireAll(req)

4. 구성을 위해 동일한 src 수준에 vue.config.js를 생성합니다

아닌 경우 주석 영역에 요약되어 있습니다. -vue-cli4 프로젝트,

const path = require(&#39;path&#39;)

function resolve(dir) {
  return path.join(__dirname, &#39;.&#39;, dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg,
    config.module
      .rule(&#39;svg-sprite-loader&#39;)
      .test(/\.svg$/)
      .include
      .add(resolve(&#39;src/assets/imgs&#39;)) // 处理svg目录
      .end()
      .use(&#39;svg-sprite-loader&#39;)
      .loader(&#39;svg-sprite-loader&#39;)
      .options({
        symbolId: &#39;icon-[name]&#39;
      })
  },
};
config.module.rules.delete("svg");报错的话,可以尝试使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();의 문을 교체합니다. 5. main.js에 도입하고 약간 수정합니다.

여기서 구성 요소 등록은 main.js에 위치합니다. 그렇지 않으면 [Vue 경고]: 구성 요소 해결 실패: svg-icon이 보고됩니다. 상위 구성 요소가 먼저 생성되었지만 하위 구성 요소가 아직 생성되지 않아 이 문제가 발생할 것으로 예상됩니다.

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import store from &#39;./store&#39;
import &#39;@/assets/icons&#39;

const app = createApp(App)

import SvgIcon from &#39;@/components/svgIcon&#39; 
app.component(&#39;svg-icon&#39;, SvgIcon)

app.use(store).use(router).mount(&#39;#app&#39;)

6.

<div class="topLeft">
  <svg-icon icon-class="category"></svg-icon>
</div>
<div class="topCenter"></div>
<div class="topRight">
  <svg-icon icon-class="search"></svg-icon>
</div>
페이지

7. 파일 디렉터리 구조 및 효과 표시

위 내용은 vue3+vue-cli4에서 svg를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제