css使用svg symbol

SVG (Scalable Vector Graphics) 符号在CSS中主要用于创建图标或者图形，通过将SVG元素转换成symbol定义，并在需要的地方引用它。这提供了一种模块化的方式来管理和复用SVG图标，以下是SVG Symbol的基本使用步骤：

1. 创建SVG符号（symbol element）:

   <svg>
     <defs>
       <symbol id="my-icon" viewBox="0 0 24 24">
         <path d="M..."/>
       </symbol>
     </defs>
   </svg>

这里`viewBox`属性定义了符号的坐标系统，`<path>`元素表示图形的实际内容。

2. 使用符号（use element）:

   <svg>
     <use xlink:href="#my-icon" width="24" height="24"></use>
   </svg>

`xlink:href`属性指向之前定义的符号ID，`width`和`height`可以调整显示大小。

3. CSS样式：
可以使用普通的CSS来控制symbol的颜色、填充等外观，因为symbol本身就是一个包含矢量路径的元素。

优点包括：
- 跨平台兼容性强，因为SVG是基于XML的标准。
- 图标缩放不失真。
- 可方便地应用到各种尺寸和颜色背景下。

相关问题

vue2项目中使用svg图标原创

在Vue2项目中，使用SVG（Scalable Vector Graphics）图标可以带来许多优势，比如矢量图形不受分辨率影响、体积小、加载快等。如果你想要使用原创的SVG图标，你可以按照以下步骤操作：

1. **创建SVG文件**：使用Illustrator、Sketch或其他矢量图形工具设计SVG图标。保持设计简洁明了，尽量避免过多的颜色和复杂的路径。

2. **保存SVG文件**：将设计导出为SVG格式，确保文件包含了XML声明和视图盒（`<svg>`标签），以及优化过的路径数据。

3. **封装到.vue文件**：为了便于复用和管理，可以将SVG作为组件编写，创建一个名为Icon.vue的文件，内容类似这样：

   <template>
     <symbol id="my-icon" viewBox="0 0 24 24">
       <path d="..."/>
     </symbol>
   </template>

   <script>
   export default {
     name: 'MySvgIcon',
     components: { },
     data() {
       return {
         iconPath: '#my-icon'
       }
     }
   }
   </script>

这里`viewBox`属性设置图标在24x24像素的坐标空间范围。

4. **在需要的地方使用**：

   <use :href="iconPath" class="your-icon-class"></use>

`:href`绑定到SVG组件的数据属性，动态显示对应的SVG图标。

5. **CSS样式**：如果需要，可以添加一些基本的CSS样式调整图标大小、颜色或位置。

const { defineConfig } = require("@vue/cli-service"); const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, css: { loaderOptions: { less: { additionalData: '@import "@/design/var/index.less";@import "@/components/style/index.less";', }, }, }, chainWebpack: (config) => { config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg config.module .rule("svg-sprite-loader") // rule 匹配规则 .test(/\.svg$/) // 用正则匹配 文件 .include // 包含 .add(resolve("src/icons")) // 处理svg目录 .end() .use("svg-sprite-loader") // 配置loader use() 使用哪个loader .loader("svg-sprite-loader") // 加载loader .options({ // [name] 变量。一般表示匹配到的文件名 xxx.svg // 注意： symbolId 在 <use xlink:href="#dl-icon-svg文件名" /> symbolId: "dl-icon-[name]", // 将所有的.svg 集成到 symbol中，当使用 类名 icon-文件名 }); }, });在这个代码里如何添加devServer和proxy

你可以通过在 `module.exports` 下面添加 `devServer` 和 `proxy` 配置来配置 `devServer` 和 `proxy`，具体如下：

const { defineConfig } = require("@vue/cli-service"); 
const path = require("path"); 

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

module.exports = defineConfig({   
  transpileDependencies: true,   
  lintOnSave: false,   
  css: {     
    loaderOptions: {       
      less: {         
        additionalData:           
        '@import "@/design/var/index.less";@import "@/components/style/index.less";',       
      },     
    },   
  },   
  chainWebpack: (config) => {     
    config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg     
    config.module       
      .rule("svg-sprite-loader") // rule 匹配规则       
      .test(/\.svg$/) // 用正则匹配 文件       
      .include // 包含       
      .add(resolve("src/icons")) // 处理svg目录       
      .end()       
      .use("svg-sprite-loader") // 配置loader use() 使用哪个loader       
      .loader("svg-sprite-loader") // 加载loader       
      .options({         
        // [name] 变量。一般表示匹配到的文件名 xxx.svg         
        // 注意： symbolId 在 <use xlink:href="#dl-icon-svg文件名" />         
        symbolId: "dl-icon-[name]", // 将所有的.svg 集成到 symbol中，当使用 类名 icon-文件名       
      });   
  },
  
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  proxy: {
    '/foo': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/foo': ''
      }
    }
  }

});

上面的代码中，`devServer` 和 `proxy` 都是在 `module.exports` 中添加的配置项，其中：

- `devServer` 用于配置本地开发服务器；
- `proxy` 用于配置代理请求；

这里的配置和之前的一样，你可以根据自己的需求进行修改。